居中主体，最大宽度 bootstrap 4

Question

我希望我的 Bootstrap 4 网页的最大宽度为 960 像素，包括顶部导航栏。我试图用设置了最大宽度的 div 将正文中的所有内容括起来。然而，这个 "body div" 是左对齐的。当视口宽度大于 960px 时，我希望 "body div" 位于中间，周围有空格。

如何最好地实现这一点？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Max body width</title>
</head>
<body>
<div id= "body-div">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container">
    <button class="btn btn-primary" onclick = "toggle();">Toggle max-width</button>
    <script type="text/javascript">
         function toggle(){
             var div = $('#body-div');
             if(div.css('max-width') !== "960px"){
                 div.css('max-width', '960px');
             }
             else{
                div.css('max-width', '');
             }
         }
    </script>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p><p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
    </div>
</div>
</body>
</html>

https://jsbin.com/towapid/1/edit?output

Answer 1

要像这样居中对齐 div，您需要做的就是在 #body-div 上添加一个 margin:auto;。边距是根据 div 的宽度计算的。

因此，在您的 css 中，您只需添加以下内容：

#body-div{
   margin:auto;
}

Answer 2

这是 Bootstrap 4 中的一种方法：

注意：此解决方案不使用您的 body-div 或任何其他 hack，因为不需要任何 hack。这一切都可以单独使用原生 Bootstrap 类来完成。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>

       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
                   <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Link</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link disabled" href="#">Disabled</a>
               </li>
           </ul>
       </div>
   </div>
</nav>

<div class="container">
   <div class="row no-gutters">
       <div class="col col-lg-10 offset-lg-1">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
           <p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
       </div>
   </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

这是另一个版本（您可能更喜欢这个）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
       <a class="navbar-brand" href="#">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
       </button>

       <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
                   <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Link</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link disabled" href="#">Disabled</a>
               </li>
           </ul>
       </div>
   </div>
</nav>

<div class="container">
   <div class="row">
       <div class="col mx-5">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tristique, dui vitae pharetra sollicitudin, felis metus dignissim sapien, at sodales libero massa condimentum dui. Maecenas sem diam, porttitor eget lacus at, vulputate facilisis leo. Nulla ut nisi sem. Nunc sapien neque, maximus fermentum mi ut, dapibus fermentum nunc. Phasellus dignissim laoreet dictum. </p>
           <p>Sed egestas sem ut viverra dignissim. Sed blandit rhoncus turpis, ac feugiat tortor venenatis id. Ut ac fermentum enim. Integer vitae malesuada sem, nec ultrices mi. Fusce mattis ante vel lacinia convallis. Integer posuere nisi sit amet augue ultrices, quis elementum ante consequat. Sed et ornare lectus. Phasellus rutrum luctus ipsum non vestibulum. Etiam efficitur nulla at erat blandit, sit amet tristique ante gravida. Proin tortor purus, eleifend vel metus hendrerit, tincidunt tristique sapien. Donec lacinia aliquam lacus, in efficitur velit facilisis ac.</p>
       </div>
   </div>
</div>



    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

居中主体，最大宽度 bootstrap 4

Centered body with max width in bootstrap 4

html

css

width

bootstrap-4