Сложная верстка бутстрап

308
02 января 2018, 14:19

Как сверстать такой блок, чтобы красный горизонтальный блок снизу, и темно-серый сверху были на всю ширину монитора, но при этом чтобы в них контент был в контенейре. Также с левым блоком логотипа.

Красные вертикальные линии - должен быть container bootstrap'a

Answer 1

.additional { 
  text-align: right; 
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-2" style="background:red">Logo</div> 
    <div class="col-10"> 
      <div class="row additional"> 
        <div class="col-12" style="background:antiquewhite">1</div> 
        <div class="col-12" style="background:silver">2</div> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

Нужно сымитировать у .container-fluid и у содержимого .container одинаковые фоны по левую и правую стороны. Сделать это можно, например, так:

.container-fluid { 
  position: relative; 
  padding: 0 !important; 
} 
 
.top { 
  position: absolute; 
  width: 100%; 
  top: 0; 
  right: 0; 
  height: 30px; 
  background-color: #3A3A3A; 
} 
 
.bottom { 
  position: absolute; 
  right: 0; 
  top: 30px; 
  width: 100%; 
  height: 45px; 
  background-color: #CC293A; 
} 
 
.left { 
  width: 20%; 
  height: 75px; 
  background-color: #6A6A6A; 
  position: absolute; 
  top: 0; 
  left: 0; 
} 
 
.row, .col-sm-3, .col-sm-9 { 
  padding: 0 !important; 
  margin: 0 !important; 
} 
 
.container { 
  padding: 0 !important; 
  border-left: 2px solid red; 
  border-right: 2px solid red; 
} 
 
.col-sm-3 { 
  color: red; 
  height: 75px; 
  font-size: 42px; 
  background-color: #6A6A6A; 
} 
 
.in-top { 
  height: 30px; 
  background-color: #3A3A3A; 
  color: red; 
  text-align: right; 
} 
 
.in-bottom { 
  height: 45px; 
  background-color: #CC293A; 
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
  <div class="top"></div> 
  <div class="bottom"></div> 
  <div class="left"></div> 
   
  <div class="container"> 
    <div class="row"> 
      <div class="col-sm-3 col-md-2">LOGO</div> 
      <div class="col-sm-9 col-md-10"> 
        <div class="in-top">EN RU</div> 
        <div class="in-bottom"></div> 
      </div> 
    </div> 
  </div> 
 
</div>

То есть мы сначала с помощью 3-х абсолютно спозиционированных блоков раскрашиваем .container-fluid, а потом накладываем поверх этого .container с содержимым, где блоки внутри контейнера тоже раскрашены соответствующим образом.

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
	<div class="container-fluid" style="padding: 0; background-color: red;"> 
		<div class="container" style="color: #fff">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dolor qui voluptatum, assumenda, accusamus ipsam iure. Quod labore recusandae, temporibus voluptas ducimus quidem provident totam explicabo cum officiis aliquam adipisci! Labore, adipisci deleniti esse optio blanditiis ut ipsa incidunt at beatae ipsum atque magni, quisquam tempora quis debitis, nesciunt maiores praesentium? Doloribus alias, delectus ratione inventore quisquam in vitae nam, neque perspiciatis reprehenderit necessitatibus ducimus saepe laboriosam incidunt nisi. Hic nobis a dolorem perspiciatis laboriosam et voluptate maiores, officia laudantium, totam fugit laborum necessitatibus. Ex in ipsum nulla delectus expedita et repellat laboriosam maxime, a itaque pariatur consectetur enim, impedit!</div> 
	</div>

READ ALSO
Получение записей из сообщества ВК

Получение записей из сообщества ВК

Как можно получить 5 последних записей из сообщества, например, тжурнал? Пробовал через Vk api, но он все время ругается на токенУ меня не получается...

283
Верстка 2-х блоков с 100% шириной в контейнере

Верстка 2-х блоков с 100% шириной в контейнере

Господа, помогайте, не получается без костылей, сверстать блоки такого типа:

285