个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:14:42 26 4
gpt4 key购买 nike

当我们使用 Bootstrap 制作网页时，我们使用放入容器中的行，所以如果使用 2 行，如何使第二行填满整个页面？

即如果我有这两行:

here

如何让第二个(蓝色的)填满页面的其余部分？

谢谢

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:我只是想转换行属性，而不是使用一行并使用正文的背景颜色为页面的其余部分着色。

最佳答案

您可以使用 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>

A jsfiddle也供引用。

关键代码的一些解释:

  • display: flex;:对 display: flex 内的元素使用 flex 布局。
  • flex-direction: column;: 垂直排列.row
  • flex: 1;:使 .container-fluid 的最后一个 child (在您的情况下为 .row2)自动增长/收缩。

关于html - 如何使 Bootstrap 行背景颜色填充页面的其余部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43815183/

26 4 0
文章推荐： javascript - Angular 显示/隐藏 ng View 外的 div
文章推荐： javascript - Angular 绝对路线和路线/stateProvider
文章推荐： c++ - 为什么标准类不对不可复制类型使用 static_assert？
文章推荐： javascript - knockout js : data-bind click not working
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com