删除 Bootstrap 4 行列中的相等高度答案

【问题标题】：Remove equal height in Bootstrap 4 row columns删除 Bootstrap 4 行列中的相等高度
【发布时间】：2018-03-13 05:14:41
【问题描述】：

我目前正在试用新版本的Bootstrap，当使用更新的网格系统使用此代码（JSFiddle）分割两列时：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
    Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

每一列都匹配高度，这是我将要显示的内容当前不希望出现的属性。

我对此进行了搜索，发现它不在 Bootstrap 3 中，现在由 default 引入 Bootstrap 4。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

在 Bootstrap 4 上有flexbox utilities，因此您可以将.align-items-start 添加到.row：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Bootstrap 正在使用 flexbox 格式化网格：

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用 flexbox 构建的，并且是完全响应的。下面是一个示例，深入了解了网格是如何组合在一起的。
来源： https://getbootstrap.com/docs/4.0/layout/grid/

因此，您可以使用 flexbox 实用程序来更改网格的行为。

【讨论】：

【解决方案2】：

这是因为 bootstrap 使用了 flexbox。你不能把它关掉。

您可以做的是为您的内容使用语义元素。不要将文本放在无意义的 div 中，使用段落和链接。它们不会像柱子那么高。

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
        <p>Some content on the left that's going to be smaller than right</p>
    </div>

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
         <ul>
         <li>A </li>
         <li>b </li>
         <li>c </li>
         <li>d </li>
         </ul>
    </div>
</div>

您想要的输出是什么，也许您正在以低效的方式使用网格系统？如果我们有更多关于结果应该是什么样子的信息，我们可以为您提供一些其他解决方案吗？

【讨论】：