Нужно сделать вот так ПРИ ПОМОЩИ BOOTSTRAP
А получается только так и только
*Карточка 12 колонок а полоса 2 колонки (я знаю что можно только 12 но не могу найти решения).
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНе понятно что нужно, но например так:
.grey {
background: grey;
height: 100px;
}
.pink {
background: pink;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row">
<div class="col-xs-offset-5 col-xs-2">
<div class="grey"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pink"></div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-5 col-xs-2">
<div class="grey"></div>
</div>
</div>
</div>
Или так:
.grey {
background: grey;
height: 600px;
}
.pink {
background: pink;
height: 300px;
}
.row-rel {
position: relative;
}
.fix {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="row row-rel">
<div class="col-xs-offset-5 col-xs-2">
<div class="grey">
</div>
</div>
<div class="fix">
<div class="row">
<div class="col-md-12">
<div class="pink"></div>
</div>
</div>
</div>
</div>
</div>