Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход, да бы минимизировать использование лишних тегов и стилей.Заранее спасибо
2 ответа
.block-1 {
height: 200px;
background: #ccc;
}
.block-2,
.block-3 {
height: 100px;
background: #ddd;
}
.block-3 {
height: 100px;
background: #999;
margin-left: -50px;
width: calc(100% + 50px)!important;
}
@media screen and (max-width: 767px) {
.block-3 {
margin-left: 0;
width: 100%!important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-4 block-1">1</div>
<div class="col-md-8 col-sm-8">
<div class="row">
<div class="col-md-12 col-sm-12 block-2">2</div>
<div class="col-md-12 col-sm-12 block-3">3</div>
</div>
</div>
</div>
</div>
-
-
2
-
Вместо
col-md-4 col-sm-4
достаточноcol-sm-4
. И поскольку бутстрап работает в логике "mobile first", органичнее использоватьmin-width
вместоmax-width
. Тогдаmargin-left
иwidth
для третьего блока понадобится определять только один раз - внутри@media screen and (min-width: 768px)
. Commented 24 мая 2016 в 17:32
Поскольку вопрос про минимизацию кода, предлагаю ещё один вариант.
Строил то же, что и soledar10. Отличия в деталях:
- Второй и третий блоки не надо заворачивать в отдельную строку.
- Вместо
calc
можно использовать проценты от ширины экрана. - Поскольку бутстрап рабоает в логике "mobile first", органичнее использовать
@media (min-width: 768px)
. Это позволяет задатьwidth
иmargin-left
для третьего блока только один раз, когда они отличаются от значений по умолчанию. col-sm-
действует для всех экранов шириной от 768 пикселей. Если при большей ширине экрана поведение не меняется, то другие классы добавлять не нужно.
.block-red {
background-color: red;
height: 400px;
}
.block-green {
background-color: green;
height: 200px;
}
.block-yellow {
background-color: yellow;
height: 200px;
}
@media (min-width: 768px) {
.block-yellow {
margin-left: -10%;
width: 85% !important;
}
}
<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">
<div class="row">
<div class="col-sm-3 block-red"></div>
<div class="col-sm-9 block-green"></div>
<div class="col-sm-9 block-yellow"></div>
</div>
</div>