使用 Bootstrap 4 垂直对齐嵌套行

Question

使用 Bootstrap 4，我在尝试分别使用 align-items-start 和 align-items-end 时遇到垂直对齐嵌套行的问题。

这是我当前的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-around">

    <div class="col-sm-2 align-self-center"> <!-- Left side col -->
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
    </div>

    <div class="col-sm-8"> <!-- Right side col -->
      <div class="row align-items-start" style="background-color:gray;"> <!-- Upper right row -->
        <div class="col">
          <p>Right col, upper left</p>
        </div>
        <div class="col">
          <p>Right col, upper right</p>
        </div>
      </div>

      <div class="row align-items-end" style="background-color:orange;"> <!-- Lower right row -->
        <div class="col">
          <p>Right col, lower left</p>
        </div>
        <div class="col">
          <p>Right col, lower middle</p>
        </div>
        <div class="col">
          <p>Right col, lower right</p>
        </div>
      </div>
    </div>

  </div>
</div>

这是一个小提琴：http://jsfiddle.net/SIRmisterD/x1hphsvb/17/

据我所知，当我检查元素时，父列（col-sm-8 行）相对于左侧列（col-sm-2）的大小是正确的，因为它们的高度相同。但是，一旦引入了两个嵌套行，align-items-xxx 类就不会被使用。

Answer 1

为行设置align-items-* 类只会影响它们的内容，但不会影响它们自己的位置。要达到预期的效果，两行的父级（.col-sm-8 元素）需要具有三个类：

• d-flex：使列本身成为 flexbox（默认情况下，Bootstrap 4 中只有行有 display: flexbox）
• flex-column：从上到下而不是从左到右显示孩子
• justify-content-between：让孩子之间有空间
  • 这似乎是错误的，因为通常justify-content-between 应用于 X / 主轴，但由于我们已经应用了 flex-column 类，该类的效果也将被反转，而是影响 Y 轴

将这三个类插入列并从行中删除不必要的类将实现您想要的布局。

您更新的 sn-p：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row justify-content-around align-items-stretch">
    <div class="col-sm-2">
      <!-- Left side col -->
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
      <p>Content goes here</p>
    </div>
    <div class="col-sm-8 d-flex flex-column justify-content-between">
      <!-- Right side col -->
      <div class="row" style="background-color:gray;">
        <!-- Upper right row -->
        <div class="col">
          <p>Right col, upper left</p>
        </div>
        <div class="col">
          <p>Right col, upper right</p>
        </div>
      </div>
      <div class="row" style="background-color:orange;">
        <!-- Lower right row -->
        <div class="col">
          <p>Right col, lower left</p>
        </div>
        <div class="col">
          <p>Right col, lower middle</p>
        </div>
        <div class="col">
          <p>Right col, lower right</p>
        </div>
      </div>
    </div>
  </div>
</div>

还有the JSFiddle。

似乎有两个 Bootstrap 样式表被导入到 Fiddle 中，一个是 v4，一个是自定义的 Flatly v3 - 这可能会导致两个类都应用样式时出现问题，所以最好保留版本 4仅限。

有关 flexbox 的更多信息，请从 the guide at CSS-Tricks.com 和 the Bootstrap 4 Grid System 了解更多信息。