В макете имеется полоска (синяя сверху), которая вылезает за край сетки (контейнера). Если она была бы с обеих сторон, то проблем нет - делаю фоном вне контейнера, а контент в контейнере (как сделаны другие блоки), но тут вопрос в том, что полоска вылезает за сетку только с одной стороны и в голову ничего не приходит, как это реализовать.
2 ответа
Фон выглядывает из-под контейнера только с одной стороны
Градиент позволяет задать фон с синей полосой, идущей от середины до правого края экрана:
background: linear-gradient(to right, transparent 50%, darkblue 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
Чтобы этот фон оказался под основным контейнером, можно сделать матрёшку:
.container-fluid
>.row
с градиентом >.container
>.row
с шапкой сайта
Или:
<header>
с градиентом >.container
>.row
с шапкой сайта
Для наглядности подкрасил области с логотипом и меню в разные оттенки синего.
1. .container-fluid
В бутстрапе два варианта контейнера: container-fluid
всегда занимает всю ширину экрана, а просто container
задаёт колонку фиксированной ширины.
https://jsfiddle.net/glebkema/ohLhdwqw
.header {
color: darkblue;
font-weight: bold;
}
@media (min-width: 768px) {
.header {
background: linear-gradient(to right, transparent 50%, darkblue 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
}
}
.contacts {
background: darkblue;
color: white;
height: 30px;
line-height: 30px;
}
.logo {
background: #ccf;
height: 100px;
line-height: 100px;
}
.menu {
background: #99f;
height: 70px;
line-height: 70px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row header">
<div class="container">
<div class="row">
<div class="col-sm-3 logo">Logo</div>
<div class="col-sm-9 contacts">Contacts</div>
<div class="col-sm-9 menu">Menu</div>
</div>
</div>
</div>
</div>
2. <header>
В HTML5 элемент <header>
задаёт шапку сайта или раздела.
https://jsfiddle.net/glebkema/g54am6u4
header {
color: darkblue;
font-weight: bold;
}
@media (min-width: 768px) {
header {
background: linear-gradient(to right, transparent 50%, darkblue 50%);
background-size: 100% 30px;
background-repeat: no-repeat;
}
}
.contacts {
background: darkblue;
color: white;
height: 30px;
line-height: 30px;
}
.logo {
background: #ccf;
height: 100px;
line-height: 100px;
}
.menu {
background: #99f;
height: 70px;
line-height: 70px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<header>
<div class="container">
<div class="row">
<div class="col-sm-3 logo">Logo</div>
<div class="col-sm-9 contacts">Contacts</div>
<div class="col-sm-9 menu">Menu</div>
</div>
</div>
</header>
-
Спасибо, то, что надо! С .container-fluid пока не разбирался, по-этому не очень понимаю, как его использовать. – VeroLom 2 июн '16 в 16:10
-
@VeroLom В бутстрапе два варианта контейнера.
container-fluid
всегда занимает всю ширину экрана, а простоcontainer
задаёт материала страницы колонку фиксированной ширины. Если нужна аккуратная колонка для меню, текста и фотографий. то берёмcontainer
. Если нужно занять всю ширину экрана -container-fluid
. – Gleb Kemarsky 2 июн '16 в 22:11 -
Как я понял, если у части страницы (блока) будет фон, отличающийся от остальных блоков, то надо сначала прописать
.container-fluid
, в нём элемент с фоном, а в нём уже обычный.container
с контентом? Бутстрап только недавно начал учить, ещё не всё знаю и осмыслил. – VeroLom 3 июн '16 в 0:23 -
@VeroLom
.container
задаёт общую колонку для материала, а.container-fluid
помогает добавить блок, выходящий за пределы этой колонки. Например, фотографию, слайдшоу или видео. Кстати, чтобы задать фон на всю ширину экрана, можно использовать не только.container-fluid
, но и<header>
. Добавил этот вариант в свой ответ. – Gleb Kemarsky 3 июн '16 в 7:28
Если в контейрере синяя синяя полоса занимает больше половины, то можно сделать так:
http://www.bootply.com/bdhIp9EVor
<style>
#header:after {
content: "fill";
width: 50%;
background: lightblue;
position: absolute;
right: 0;
top: 0;
z-index:-999;
}
#menu {
background: lightblue;
}
</style>
<div class="container-fluid">
<div class="container" id="header">
<div class="row">
<div class="col-md-2">LOGO</div>
<div class="col-md-8" id="menu">NAV</div>
</div>
</div>
</div>
container-fluid
для фона, который должен быть на всю ширину – lexxl 1 июн '16 в 12:59position: absolute
для этой "синей линии" (либо вариации с псевдоэлементом для неё и т.п.) и растянуть её вправо до нужного размера – lexxl 1 июн '16 в 13:24