Как правильно сверстать такой блок с карточками? (фото в описании)

224

31 января 2018, 12:34

Как правильно сверстать блок с карточками, которые выходят за пределы сетки (как на изображении)

Answer 1

Для того, чтобы сделать один из контейнеров на всю ширину экрана, нужно его поместить в другой враппер, а после блока вернуться к предыдущей конструкции:

.wrapper { 
  margin: 0 auto; 
  width: 80% 
} 
 
.content { 
  background: navy; 
  color: white 
}

<div class=wrapper> 
  <div class=content> 
    обычный враппер<br>обычный враппер<br>обычный враппер<br>обычный враппер<br>обычный враппер<br> 
  </div> 
</div> 
<div class=wrapper_2> 
  <div class=content> 
    на всю ширину<br>на всю ширину<br>на всю ширину<br>на всю ширину<br>на всю ширину<br> 
  </div> 
</div> 
<div class=wrapper> 
  <div class=content> 
    обычный враппер<br>обычный враппер<br>обычный враппер<br>обычный враппер<br>обычный враппер<br> 
  </div> 
</div>

Answer 2

Вот пример:

.wrap { 
  padding: 20px 0; 
  border: 1px solid #000; 
  text-align: center;   
} 
 
.wrap-big { 
  padding: 35px 0; 
} 
[class*="col-"] { 
  border: 1px solid red; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container wrap">1-й</div> 
 
<div class="container-fluid wrap-big"> 
  <div class="row"> 
    <div class="col-xs-2">1</div> 
    <div class="col-xs-2">2</div> 
    <div class="col-xs-2">3</div> 
    <div class="col-xs-2">4</div> 
    <div class="col-xs-2">5</div> 
    <div class="col-xs-2">6</div> 
  </div> 
</div> 
 
<div class="container wrap">3-й</div>