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

这是一个fiddle：http://jsfiddle.net/SIRmisterD/x1hphsvb/17/

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

Answer 1

对行使用 align-items-* classes 只会影响它们的内容，但不会影响它们自己的位置。为了达到预期的效果，两行的parent（.col-sm-8元素）需要有三个class：

d-flex：使列本身成为弹性框（默认情况下，只有行在 Bootstrap 4 中具有 display: flexbox）
flex-column: 从上到下而不是从左到右显示 children
justify-content-between：让 children 中间有 space
- 这似乎是错误的，因为通常 justify-content-between 应用于 X / 主轴，但由于我们已经应用了 flex-column class，因此 class 也会反转，影响 Y 轴

将这三个 class 插入到列中并从行中删除不需要的那些将实现您想要的布局。

您更新的代码段：

<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 – 这可能会导致应用样式时出现问题来自两个 classes，所以最好只保留版本 4。

有关 flexbox 的更多信息，请参阅 the guide at CSS-Tricks.com and about the Bootstrap 4 Grid System。

使用 Bootstrap 垂直对齐嵌套行 4

Vertically align nested rows using Bootstrap 4

html

twitter-bootstrap

css

twitter-bootstrap-4