Вопрос по bootstrap-4, twitter-bootstrap-4, twitter-bootstrap, css, css3 – начальная загрузка 4 ряда высоты

7

я есть немного нетрадиционный DIV в этом дизайне, как показано ниже. Я мог бы использовать высоту и сделать это, но я хочу, чтобы она изменялась динамически:Например, если в DIV больше содержимого и высота изменяется в одном из блоков справа, левый DIV также автоматически регулирует его высоту. Интересно, может ли Flex помочь. Вот как это должно измениться на:

У меня есть этот HTML до сих пор:

<div class="container">
  <div class="row row-eq-height">
      <div class="col-sm-8 col-8">
        <div class="black">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-sm-4 col-4">
        <div class="red">
          <p>numbers</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

и CSS:

p { color: #fff; }
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue; }
.purple { background-color: purple; }

JSFiddle Demo

Ваш Ответ

3   ответа
10

верно? Bootstrap 4 по умолчанию реализует flexbox, и вы можете решить эту проблему очень просто, используя чисто классы. Bootstrap 4 обеспечивает:

<div class="container">
  <div class="row">
      <div class="col-sm-8 col-8 black">
          <p>Bar Graph or Line Graph</p>
      </div>
      <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap">
        <div class="red">
          <p>numbers and more and so on and on and on</p>
        </div>
        <div class="purple">
          <p>numbers</p>
        </div>
        <div class="green">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p class="mb-0">numbers</p>
        </div>
      </div>
  </div>
</div>

JS Fiddle link:https://jsfiddle.net/ydjds2ko/

Подробности:

Тебе не нужен классrow-eq-height (в любом случае это не Bootstrap4), потому что по умолчанию одинаковая высота.

Первый div с классомcol-sm-8 имеет правильную высоту, это просто не видно на черном фоне, потому что внутренний div имеет свою собственную высоту. Я просто удалил внутренний div и добавил классblack к цв. Если вам нужен внутренний div, присвойте ему класс (Bootstrap4)h-100 который регулирует высоту родительского элемента.

div с классом col-sm-4 get - это классы d-flex, выровнявшие содержимое по кругу. Они выравнивают содержимое div. Бутстрап доку:https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

Установите ширину div в этом контейнере на вид родительского элемента с помощью w-100.

Поскольку<p> добавляет поле внизу, ваш синий div на концах не закрывается на одном уровне с черным div. Я добавил класс "mb-0", который устанавливает нижнюю границу на "0", чтобы вы могли видеть, как она работает.

Это должно работать, если правый или левый div имеет больший рост.

Редактировать: добавлены классы для выравнивания контента.

Вы правы! Элементы div в правом столбце не выровнены сами по себе. К счастью, Bootstrap покрывает и этот случай. Вы можете заставить это работать так:jsfiddle.net/ydjds2ko programmiri
Это так просто! Тем не менее, это не работает в этом случае:jsfiddle.net/huoaynb0/1 Elaine Byene
3

Только Bootstrap подход для этого. Вам не нужно никаких дополнительных CSS.

https://www.codeply.com/go/J3BHCFT7lF

<div class="container">
  <div class="row">
      <div class="col-8">
        <div class="black h-100">
          <p>Bar Graph or Line Graph</p>
        </div>
      </div>
      <div class="col-4 d-flex flex-column">
        <div class="red mb-2">
          <p>numbers</p>
        </div>
        <div class="purple mb-2">
          <p>numbers with more lines of content that wrap to the next line</p>
        </div>
        <div class="green mb-2">
          <p>numbers</p>
        </div>
        <div class="blue">
          <p>numbers</p>
        </div>
      </div>
  </div>
</div>

Это используетBootstrap 4 служебных класса сделать правильную высоту заполнения столбца.

Связанный:
начальная загрузка 4 ряда высоты

4

Flexbox за это.

Обновить

И еще один способ:

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] {
  display: flex;
  flex-direction: column;
}

.row-eq-height > [class^=col]:last-of-type div {
  margin: 10px;
}

.row-eq-height > [class^=col]:last-of-type div:first-of-type {
  margin-top: 0;
}

.row-eq-height > [class^=col]:last-of-type div:last-of-type {
  margin-bottom: 0;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}
Обновить

Лучший способ с более конкретными классами:

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type {
  display: flex;
}

.row-eq-height > [class^=col]:first-of-type .black {
  flex-grow: 1;
}

.blue p {
  margin: 0;
}

Оригинальный способ:

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] {
  display: flex;
  flex-direction: column;
}

[class^=col] div {
  flex-grow: 1
}
Я так много учусь! Спасибо еще раз :) :) Elaine Byene
@ElaineByene, я обновился с другой реализацией, использующей более конкретные / семантические селекторы. Raphael Rafatpanah
@ElaineByene, я добавил третий путь, так как второй способ только гарантирует, что левый столбец (.black) соответствовал высоте первого столбца, содержащего четыре цвета. Третий способ гарантирует, что ряд действительно равен высоте. Raphael Rafatpanah
@ElaineByene Абсолютно. Используйте селектор, который имеет смысл для вас. Сначала я бы порекомендовал узнать о flexbox, поскольку вначале он немного сложнее. Не стесняйтесь задавать конкретные вопросы по flexbox, если вы застряли. Рад был помочь. Raphael Rafatpanah
Отлично! В исходном коде были проблемы с другими DIV. Большое спасибо :) Elaine Byene

Похожие вопросы