Колонны разной высоты в бутстрапе - PullRequest
Новая
       37

Колонны разной высоты в бутстрапе

0 голосов
/ 07 октября 2018

Я хочу создать два столбца, один столбец с 3 полями меньшей высоты, а второй столбец с 1 полем большей высоты.Однако, когда я увеличил высоту блока во втором столбце, последние два блока в первом столбце перемещаются дальше вниз по странице.Я хочу, чтобы 2 столбца происходили рядом.(Я хочу, чтобы красные и синие прямоугольники ниже двигались вверх рядом с большим серым квадратом)

HTML: 

<div class="row">
                <div class="col-xs-4">
                    <div class="l-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
                <div class="col-xs-7">
                    <div class="dashboard col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br>
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="rel-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-4">
                    <div class="exp-board col-xs-12  col-xs-offset-1"><br><br><br><br><br><br><br><br><br><br></div>
                </div>
            </div>

CSS: 

.l-board{
    background-color:#F5FCF4;
    margin-bottom: 10%;
}
.rel-board{
    background-color:#FAEDED;
    margin-bottom: 10%;
}
.exp-board{
    background-color: #F0F5FA;
    margin-bottom: 10%;
}

.dashboard{
    background-color: #F4F4F4;
}

Текущий вид:

Current Webpage

Макет, который я хочу:

I want the red and blue boxes below to move up next to the large grey box

1 Ответ

0 голосов
/ 07 октября 2018

Bootstrap работает на основе столбцов внутри строк.Это означает, что он всегда работает горизонтально, , а затем вертикально.Чтобы получить желаемый макет, вам нужно рассмотреть страницу, состоящую из двух столбцов;Лево и право.Крайний левый столбец содержит три элемента, которые занимают все оставшиеся с помощью (col-12), тогда как крайний левый столбец содержит один элемент с втрое большим числом height.

Обратите внимание, чтовам также придется учитывать любые margin / padding в правом столбце;далее я использую margin из 5px (в основном только для отображения background для каждого элемента), что означает, что мне нужно добавить 20px из height для правого столбца (охватывающий внешний 10px плюс два внутренних 5px зазора): 

.element {
  height: 100px;
  background: red;
  margin: 5px;
  padding: 10px;
}

.right .element {
  height: 320px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-12">
        <div class="element">Top-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Mid-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Bottom-left</div>
      </div>
    </div>
  </div>
  <div class="col-6 right">
    <div class="element">Right</div>
  </div>
</div>

Это можно даже расширить, используя комбинацию переменных CSS и calc(), чтобы гарантировать, что все значения height / margin всегда отображаются правильно, поэтому вам не нужно беспокоиться о самостоятельной обработке вычислений - все, что вам нужно сделать, это установить базу heightи margin: 

:root {
  --height: 100px;
  --margin: 5px;
}

.element {
  background: red;
  height: var(--height); /* Each element has the base height */
  margin: var(--margin); /* Each element has the base margin */
  padding: 10px;
}

.right .element {
  /* The right-hand element has [element_count] times as much height 
  and [element_count + 1] times as much margin */
  height: calc((var(--height) * 3) + ((var(--margin) * (3 + 1))));
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-12">
        <div class="element">Top-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Mid-left</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="element">Bottom-left</div>
      </div>
    </div>
  </div>
  <div class="col-6 right">
    <div class="element">Right</div>
  </div>
</div>
...