Как сверстать такой блок, чтобы красный горизонтальный блок снизу, и темно-серый сверху были на всю ширину монитора, но при этом чтобы в них контент был в контенейре. Также с левым блоком логотипа.
Красные вертикальные линии - должен быть container bootstrap'a
.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>
Нужно сымитировать у .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 с содержимым, где блоки внутри контейнера тоже раскрашены соответствующим образом.
<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>
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости