使用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(默认情况下,只有行在display: flexboxBootstrap 4中)
• flex-column:从上到下而不是从左到右显示孩子
• justify-content-between:让孩子们之间有空间
  • 这似乎是错误的,因为通常justify-content-between应用于X /主轴,但是因为我们已经应用了这个flex-column类,所以这个类的效果也会被反转,影响Y轴而不是

将这三个类插入到列中并从行中删除不必要的类将实现所需的布局.

您更新的代码段:

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

还有JSFiddle.

似乎将两个Bootstrap样式表导入到Fiddle中,其中一个是v4,另一个是自定义的Flatly v3 - 这可能会导致问题,因为两个类都应用了样式,因此最好只保留版本4.

有关flexbox的更多信息,请从CSS-Tricks.com上的指南以及Bootstrap 4网格系统中了解更多信息.