我目前正在尝试新版本引导程序,当使用更新的网格系统使用此代码分割两列时(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 中,现在被引入到 Bootstrap 4 中default.
在 Bootstrap 4 上有弹性盒实用程序,所以你可以添加.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 使用 Flexbox 来格式化网格:
Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用flexbox并且完全响应。下面是一个示例,深入介绍了网格如何组合在一起。
source: https://getbootstrap.com/docs/4.0/layout/grid/
因此,您可以使用 Flexbox 实用程序来更改网格的行为。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)