Question

我的网站响应速度高达1800px，这是我想要的最大宽度。假设用户的屏幕大于1800px，我希望我的所有html / css保持与1800px相同，只是在页面中心（如果用户当前的是2200），那么左边会有200px的空白，然后是中心的1800px，右边是200px的空白。

我的代码如下：

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">navbar text</div>
    </nav>

    <!-- HOME -->
    <div id="home" class="content-section">
        <div class="container"></div>
    </div>

    <!-- ABOUT -->
    <div id="about" class="content-section">
        <div class="container"></div>
    </div>

    <!-- CONTACT -->
    <div id="contact" class="content-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 "></div>
            </div>
        </div>
    </div>

    <footer> footer text</footer>
</body>

Answer 1

使用<div class="wrapper"></div>

包裹您的代码

这是css：

.wrapper{
 width:auto;
max-width:1800;
margin:0 auto;
}

如果这可行的话

Answer 2

这就是我通常做的事情（我开发的网站最高可达4k，但它们被锁定在1920px然后它们居中（就像你想要的那样）

我设置了html＆amp;身体宽度和高度为100％，然后我将身体最大宽度设置为1940px，我应用左右10 pp的填充，以便它很好地镶边。

这是我经常使用的代码：

html, body{
 display:block;
 width: 100%;
 height: 100%;
 position:relative;
}

body{
 max-width:1940px;
 padding-left:10px;
 padding-right:10px;
}

你得到这样的东西：

你不必边界（浅灰色之前的白色间隙是我正在谈论的边界），但这是我的偏好。

如果浏览器大于设置宽度，则设置网站的最大宽度然后将此材料居中

2 个答案: