Question

我想要实现的是： 1个长左列 - 并且在它旁边，右边有2行，它们在一起 - 与左列对齐。在表格中，它很容易做到：

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

如果您正在使用容器，行，列的常规标记树，则可以先放置高col-sm-4后跟col-sm-8，然后将d-flex flex-column类添加到{ {1}}然后在col-sm-8内，您可以拥有2个带有col-sm-8类的div，它们将填充其父级区域，因此您的标记将如下所示：

col

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

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

这是如何工作的，bootstrap的行使用flex行为已经创建了他们的网格，因此他们已经在行的css中有<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>并在display:flex内添加了.col类你正在d-flex flex-column上启动弹性行为，而.col-sm-8类已经在flex中增长：1;`，因此你的flex列的子容器将填充高度。

希望这里有意义的是更新的小提琴Fiddle Demo

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

Answer 2

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

bootstrap 4垂直对齐

2 个答案: