Проблема с фоном при верстке. Bootstrap 4

207

02 марта 2018, 14:55

В общем, сижу туплю. Много чего перепробовал, но верное решение так и не пришло ко мне. Скорее всего все очень просто, но увы и ах.

Как должно быть:

Пишу с использованием сетки Bootstrap 4. Не знаю как расположить правильно фон. Он должен быть двухцветный. При этом должен выходить за пределы container бутстрапа. А соответственно все остальное должно быть в контейнере. Как расположить объекты внутри - я знаю. Проблемы со структурой кода в html для двухцветного фона на одном row.

Answer 1

Один из возможных вариантов, идею думаю поймешь:

.wapper { 
  background: linear-gradient(to left, #37d0e8 50%, #f4a142 0); 
} 
 
.col-sm { 
  border: 1px solid red; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<div class="wapper"> 
 
 
  <div class="container"> 
    <div class="row"> 
      <div class="col-sm"> 
        One of two columns 
      </div> 
      <div class="col-sm"> 
        One of two columns 
      </div> 
    </div> 
  </div> 
</div>