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

查看：21
本文介绍了删除 Bootstrap 4 行列中的相等高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">左边的一些内容会比右边小

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"><br/>B<br/><br/>D<br/><br/><br/>

每列都匹配高度，这是我将要显示的内容目前不需要的属性.

我对此进行了搜索，发现这不在 Bootstrap 3 中，现在由 默认.

解决方案

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="row align-items-start"><div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">左边的一些内容会比右边小

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"><br/>B<br/><br/>D<br/><br/><br/>

Bootstrap 使用 flexbox 来格式化网格:

<块引用>

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

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

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.

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.

解决方案

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>

Bootstrap is using flexbox to format the grid:

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/

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆