bootstrap实现1920px的方法

发布于 2022-09-06 22:57:39 字数 1044 浏览 20 评论 0

因为bootstrap的container容器设计的最大展示宽度为1140px,本人面试时别人提供的psd原图显示为1920px;没学过这种超大像素的。
如果在最外层的1920设置为margin:0 auto;并不能实现居中效果小屏幕是优先显示左边区域,各位大佬求解

    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-left nav-left"></div>
                <div class="col-md-8 text-right nav-right"></div>
            </div>
        </div>
    </header>
    <style>
        header{
            width: 1920px;
            background-color: rgb(44,44,179);
            margin: 0 auto;
        }
        .nav-left{
            height: 90px;
            background-color: #00b3ee;
        }
        .nav-right{
            height: 90px;
            background-color: #0b2e13;
        }
    </style>

实际效果

是修改媒体查询各个分辨率的最大显示宽度,还是给大的蓝色盒子怎么设置?将页面缩小的确是显示在屏幕的中间

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

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

发布评论

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

评论(1

又爬满兰若 2022-09-13 22:57:39

呃... 亲自试了一下才明白题主的提问,重新回答如下:

图片描述


使用 .container-fluid 代替 .container , 不用给header设置宽度。

图片描述

来源:https://v3.bootcss.com/css/#grid

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