Question

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

＆＃13;

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

＆＃13;

每列都匹配高度，这是我要显示的内容的当前属性。

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

Answer 1

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

＆＃13;

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

＆＃13;

Bootstrap使用flexbox格式化网格：

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

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

Answer 2

这是beacuse bootstrap使用flexbox。你不能把它关掉。

您可以做的是为您的内容使用语义元素。不要将文本放入有意义的div中，使用Paragraphs和Links。它们不会像专栏一样高。

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

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

在Bootstrap 4行列

2 个答案: