CSS Bootstrap 4 中等高的列

Equal height of columns in Bootstrap 4

提问by Elaine Byene

I have a little non-conventional DIV in this design as shown below. I could use a height and do it but I want it to change dynamically: For instance, if the DIV has more content and the height changes in one of the block on the right, the left DIV auto adjust it's height as well. I wonder if flex could help. Here's how it should change to:

我在这个设计中有一点非常规 DIV，如下所示。我可以使用高度并执行此操作，但我希望它动态更改： 例如，如果 DIV 具有更多内容并且右侧块之一的高度发生变化，则左侧 DIV 也会自动调整其高度。我想知道 flex 是否有帮助。以下是它应该如何更改为：

I have this HTML so far:

到目前为止，我有这个 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>

and CSS:

和 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

JSFiddle 演示

采纳答案by Raphael Rafatpanah

You can use flexboxfor this.

您可以为此使用flexbox。

Update

更新

And another way:

而另一种方式：

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

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;
}

Update

更新

A better way with more specific classes:

更具体的类的更好方法：

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

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;
}

Original way:

原始方式：

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

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

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

[class^=col] div {
  flex-grow: 1
}

回答by programmiri

You're using Bootstrap 4, right? Bootstrap 4 implements flexbox by default and you can solve this very easy while using purely classes Bootstrap 4 provides:

您正在使用 Bootstrap 4，对吗？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/

JS小提琴链接：https: //jsfiddle.net/ydjds2ko/

Details:

细节：

• You don't need the class row-eq-height(it's not in Bootstrap4 anyway) because equal height is default.

• The first div with the class col-sm-8has the right height, it's just not visible with the black background, because the inner div has it's own height. I just removed the inner div and added the class blackto the col. If you need inner div, give it the (Bootstrap4) class h-100which adjusts the height to the parent element.

• the div with the class col-sm-4 get's a the classes d-flex align-content-around flex-wrap. They're aligning the content divs. Bootstrap doku: https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • Set the width of the divs inside this container at the widht of the parent with w-100

• Because the <p>adds a margin at the bottom, your blue div at the ends doesn't close flush with the black div. I added the class "mb-0", which sets the margin bottom to "0" so you can see it works.

• 您不需要该类row-eq-height（无论如何它不在 Bootstrap4 中），因为默认值相等。

• 类的第一个 div 具有col-sm-8正确的高度，它只是在黑色背景下不可见，因为内部 div 有它自己的高度。我刚刚删除了内部 div 并将类添加black到 col。如果你需要内部 div，给它 (Bootstrap4) 类h-100来调整父元素的高度。

• 类 col-sm-4 的 div 是类 d-flex align-content-around flex-wrap。他们正在对齐内容 div。Bootstrap doku：https://getbootstrap.com/docs/4.0/utilities/flex/#align-content

  • 使用 w-100 将这个容器内的 div 的宽度设置为父级的宽度

• 因为<p>在底部添加了一个边距，所以末端的蓝色 div 不会与黑色 div 齐平。我添加了类“mb-0”，它将边距底部设置为“0”，以便您可以看到它的工作原理。

That should work wether the right or left div is the one with the bigger height property.

这应该适用于右侧或左侧 div 是具有更大高度属性的那个。

Edit: added classes for content alignment.

编辑：添加了用于内容对齐的类。

回答by Zim

Here's a very simple Bootstrap onlyapproach for this. You don't need any additional CSS.

这是一个非常简单的Bootstrap 唯一方法。您不需要任何额外的 CSS。

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

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>

This uses the Bootstrap 4 utility classesto make the right column fill height.

这使用Bootstrap 4 实用程序类来制作正确的列填充高度。

---

---

Related:
bootstrap 4 row height

相关：
bootstrap 4 行高