Question

我尝试用Bootstrap 4实现一个看起来像这样的组件：

+-------------------------+
| Row 1 - Top             |
+-------------------------+
|                         |
|                         |
+-------------------------+
| Row 2 - Vertical Center |
+-------------------------+
|                         |
|                         |
|                         |
|                         |
+-------------------------+

容器的高度应为100vh。根据我的理解，使用flex是一种解决这个问题的方法。

这是我目前的标记：http://codeply.com/go/RRMwIHt8QA

正如您所看到的，第2行似乎存在某种偏移。任何想法导致这种情况以及如何使该行占用可用空间的整个宽度？

Answer 1

要实现这一点，首先需要将flex-column添加到container，以便row垂直堆叠。

然后row需要align-items-start align-content-start来阻止它们伸展。

最后，使用伪::after，您可以匹配第一个row，以便第二个row可以垂直居中。另一种方法是将第一个row绝对定位，但我发现伪版本更具响应性。

Fiddle demo

Stack snippet

.test-container {
  height: 100vh;
}
.test-container .row:first-child,
.test-container::after {
  content: '';
  flex: 1 1 0;
}

/* styling for this demo */
.test-container .row > div {
  border: 1px dashed lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column container-fluid test-container">
  <div class="row align-items-start align-content-start">
    <div class="col-4">R1-C1</div>
    <div class="col-4">R1-C2</div>
    <div class="col-4">R1-C3</div>
  </div>

  <div class="row align-items-start align-content-start">
    <div class="col-4">R2-C1</div>
    <div class="col-4">R2-C2</div>
    <div class="col-4">R2-C3</div>
  </div>
</div>

Answer 2

d-flex 类可以解决您的问题

删除它或检查here哪种更适合您的需求

Bootstrap 4在d-flex容器内垂直居中一行 -

2 个答案: