Bootstrap - Как установить высоту столбца в несколько строк? - PullRequest
Новая
       55

Bootstrap - Как установить высоту столбца в несколько строк?

0 голосов
/ 13 ноября 2018

У меня есть сетка начальной загрузки, которую нужно создать для рабочего стола, вы можете увидеть макет ниже.

Proposed grid layout

Проблема, с которой я столкнулсяЭто центральный блок проходит через два ряда, поэтому я не могу понять, как это реализовать.Возможно, это вопрос новичка, но любая помощь очень ценится!

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Нечто подобное должно делать .. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">1</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="well">3
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="well">6</div>
    </div>
    <div class="col-md-6">
        <div class="well">7</div>
    </div>
</div>
0 голосов
/ 13 ноября 2018

Вы можете достичь этого, поместив свой большой ящик в один ряд, а внешние маленькие боксы - в один ряд, где два небольших бокса - это просто два ящика в одном ряду.(Оба по высоте 50%).

Посмотрите на фрагмент ниже для рабочего примера: 

.box {
  height: 100%;
  width: 100%;
  background-color: lightgrey;
}

.box-container {
  width: 100%;
  height: 50%;  
  padding: 2px;
}

.big-box {
  height: 200px;
  background-color: lightgrey;
}

.col-3, .col-6 {
  padding: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
<div class="row">
  <div class="col-3">
    <div class="box-container"><div class="box"></div></div>
    <div class="box-container"><div class="box"></div></div>
  </div>
  
  <div class="col-6">
    <div class="big-box"></div>
  </div>
  
  <div class="col-3">
    <div class="box-container"><div class="box"></div></div>
    <div class="box-container"><div class="box"></div></div>
  </div>
</div>

</div>

Примечание: Я использую col-3 и col-6 для скрипки, чтобы соответствовать окну образца, однако, если выесли вам нужна отзывчивость, вы можете использовать col-md-3 и col-md-6 (или sm вместо md, если вы хотите, чтобы он свернулся в меньшем размере).

0 голосов
/ 13 ноября 2018

Сетка имеет 12 столбцов.Сетка может перекрываться, если сумма общей сетки в вашей строке больше 12. Вы можете поместить весь контент в ряд, а затем разделить их на 3. Сделайте первый и третий два ряда и сделайте средний один центральным рядом.

Будет проще понять, если вы поделитесь своим кодом.

...