Question

当我们使用Bootstrap创建一个网页时，我们使用放在容器中的行，所以如果这样做有2行，那么如何使2nde填充整个页面？

即如果我有这两行：

如何使2nde（蓝色）填充页面的其余部分？

谢谢

HTML代码为：

<body>

<div class="container-fluid">

    <div class="row row1">

        <br>

    </div>

    <div class="row row2">

        <br>

    </div>

</div>

</body>

而css是：

.row1{
    background-color: orange;
}

.row2{
    background-color: blue;
}

p.s：我只想转换行属性，而不是使用一行，并使用正文的背景颜色为页面的其余部分着色。

Answer 1

您可以使用flex布局来实现您想要的效果。这是一个例子：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.row1{
    background-color: orange;
}

.row2{
    background-color: blue;
}
.container-fluid {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.row:last-child {
  flex: 1;
}

<div class="container-fluid">

    <div class="row row1">

        <br>

    </div>

    <div class="row row2">

        <br>

    </div>

</div>

还提供jsfiddle作为参考。

关键代码的一些解释：

display: flex;：对display: flex内的项目使用弹性布局。
flex-direction: column;：垂直排列.row。
flex: 1;：让.container-fluid的最后一个孩子（在您的情况下为.row2）自动增长/缩小。

如何使Bootstrap行背景颜色填充页面的其余部分？

1 个答案: