html - Bootstrap 。我怎样才能让一列填满两行？

Question

我正在尝试设计一个包含两行的页脚。第一个有 4 列，第二行只有一列 3 列第一行宽度。并且必须为第一行的最后一列填充空格。检查所附图片以了解问题。

/image/SrgQr.png

欢迎任何帮助。谢谢。

Answer 1

实现此目的的现代方法是使用“CSS 网格”创建 4x2 网格，但我们将使用您的 Bootstrap 库。乍一看，您有 1 个父 行 和 2 列。在左侧，您还有 3 列，其下方有 1 个全 Angular 列。然后，我们可以通过将 display 类型更改为 flex 来将高度设置为彼此相等。

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  
  /*extra styling*/
  box-sizing: border-box;
  border: 1px solid #ff0000;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-9">
    <div class="row">
      <div class="col-xs-4"><p>text</p></div>
      <div class="col-xs-4"><p>text</p></div>
      <div class="col-xs-4"><p>text</p></div>
      <div class="col-xs-12"><p>text</p></div>
    </div>
  </div>
  <div class="col-xs-3">
    <p>text</p>
  </div>
</div>