bootstrap 4 垂直对齐

Question

我想要实现的是： 1 个长的左列 - 在它旁边，右边的 2 行，一起 - 对齐到左列。在 table 中非常容易做到：

----------------------------
|         |                |
|   col-4 |     col-8      |
|         |                |
|         |________________|
|         |                |
|         |                |
|         |      col-8     |
|         |                |
----------------------------

我的代码看起来像这样，但它只完成了一半：我无法让第二行 col-8 移动到它的双胞胎（除了某种定制的双 row负 margin-top）。

<div class="row d-flex flex-row-reverse">
  <div class="col-sm-8 align-self-start">888</div>
  <div class="col-sm-4" style="height: 400px;">444</div>
  <div class="col-sm-8 ">888</div>
</div>

JSFIDDLE

谢谢。

Answer 1

您需要什么样的浏览器支持？一种可能的攻击是使用 CSS Grid. Grid is relatively well supported，并且一直在变得更好。

Answer 2

如果您使用的是容器、行、列的普通标记树，您可以先将高 col-sm-4 放在前面，然后是 col-sm-8，然后添加 class d-flex flex-column 到 col-sm-8 然后在 col-sm-8 里面你可以有 2 个 div 和 col 的 class 并且它们将填充区域他们的父项，因此您的标记如下所示：

<div class="container">
  <div class="row">
    <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
    <div class="col-sm-8 d-flex flex-column p-0">
      <div class="col">Flex item inside col-sm-8</div>
      <div class="col">Flex item inside col-sm-8</div>
    </div>
  </div>
</div>

如果您不使用 bootstraps 标记树，那么您将不得不在外部 div 启动 flex 行为，如下所示：

<div class="d-flex">
  <div class="col-sm-4" style="height:400px;">Regular col-sm-4</div>
  <div class="col-sm-8 d-flex flex-column p-0">
    <div class="col">Flex item inside col-sm-8</div>
    <div class="col">Flex item inside col-sm-8</div>
  </div>
</div>

所以这是如何工作的 bootstrap 的行已经使用弹性行为来创建它们的网格，因此它们已经在行的 css 中具有 display:flex 并通过添加 .col class 在你的 d-flex flex-column 你正在启动你的 .col-sm-8 的 flex 行为并且 .col class 有 flex-grow: 1;`在 css 中，因此您的 flex 列的子容器将填充高度。

希望这是有意义的更新 fiddle Fiddle Demo

注意：您可能希望将 p-0 的 class 添加到 flex-column 以消除列填充，就像我在上面的示例中所做的那样

bootstrap 4 垂直对齐

bootstrap 4 vertical alignment

twitter-bootstrap-4