当前位置：文江博客话题详情

Bootstrap 中如何写含有4个列,每个列都与屏幕等高的页面?

发布于 2022-09-01 07:14:28 字数 191 浏览 11 评论 0

Bootstrap 中如何写含有4个列,每个列都与屏幕等高的页面?

具体的 html 与 css 该怎么写呢?

如图

图片描述

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

美人迟暮 2022-09-08 07:14:28

试试这样呢~

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body,html,.row,.container-fluid{
        height: 100%;
    }
    .one{
        background-color: #452;
        height: 100%;
    }
    .two{
        background-color: #956;
        height: 100%;
    }
    .three{
        background-color: #034;
        height: 100%;
    }
    .four{
        background-color: #904;
        height: 100%;
    }

    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 one">
                1
            </div>  
            <div class="col-sm-3 two">
                2
            </div>              
            <div class="col-sm-3 three">
                3
            </div>              
            <div class="col-sm-3 four">
                4
            </div>      
        </div>                      
    </div>
</body>
</html>

﹎☆浅夏丿初晴 2022-09-08 07:14:28

实现的办法很多，例如使用css3中新的长度单位：vw和vh

vw：相对于视窗的宽度，视窗宽度是100vw
vh：相对于视窗的高度，视窗高度是100vh

因此，4列，与窗口等高，每列的宽为25vw，高为100vh
使用 vw 与 vh 的 DEMO

当然，你也可以使用flexbox来实现
使用flexbox的DEMO

~没有更多了~

关于作者

很酷不放纵

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文