在Bootstrap 4行列中删除相等的高度 [英] Remove equal height in Bootstrap 4 row columns

问题描述

当使用更新的网格系统分割两列时，我目前正在尝试 Bootstrap 的新版本.使用以下代码( JSFiddle ):

I'm currently trying out the new version of Bootstrap, when using the updated grid system to segment two columns using this code (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>

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

Each column matches height, which is currently an undesired attribute for the content I'll be displaying.

我已经进行了搜索，发现它不在Bootstrap 3中，现在由

I've done a search for this and found out this was not in Bootstrap 3 and was now introduced into Bootstrap 4 by default.

推荐答案

在Bootstrap 4上，有 flexbox实用程序，因此您可以将 .align-items-start 添加到 .row :

On Bootstrap 4 there are flexbox utilities, so you can add .align-items-start to the .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>

引导程序正在使用flexbox格式化网格:

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

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
source: https://getbootstrap.com/docs/4.0/layout/grid/

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

So you can change the behavior of the grid by using the flexbox utilities.

这篇关于在Bootstrap 4行列中删除相等的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！