Bootstrap изменение размера элемента

359

01 ноября 2017, 02:07

На страницах при выборе различных режимов появляются блоки с содержимым. К примеру, один выглядит следующим образом:

<div class="col-md-9 col-sm-12 col-xs-12" style="background-color: black">
    <div col-md-3 col-sm-3 col-xs-6>content...</div>
    <div col-md-3 col-sm-3 col-xs-6>content...</div>
    <div col-md-3 col-sm-3 col-xs-6>content...</div>
    <div col-md-3 col-sm-3 col-xs-6>content...</div>
</div>

Проблема в том, что при узком экране получается 4 столбца xs-6, и в итоге 2 последних оказываются за пределами родительского блока. Плюс к этому, следующие блоки отрисовываются прямо над этими столбцами.

Как в этом случае изменять высоту родителя?

Answer 1

<div class="col-md-9 col-sm-12 col-xs-12" style="background-color: black">
<div class="col-md-3 col-sm-3 col-xs-6 m-d">content...</div>
<div class="col-md-3 col-sm-3 col-xs-6 m-d">content...</div>
<div class="col-md-3 col-sm-3 col-xs-6 m-d">content...</div>
<div class="col-md-3 col-sm-3 col-xs-6 m-d">content...</div>
</div>
<style type="text/css">
.m-d {
    display: block;
    display: inline;
    display: inline-block;
 }
</style>

Попробуйте так...