Question

我的Bootstrap 4网页最大宽度为960px，包括顶部导航栏。我试图用最大宽度设置的div将所有内容包含在体内。然而，然后这个“身体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

这是在Bootstrap 4中执行此操作的方法：

注意：此解决方案不使用您的body-div或任何其他黑客，因为不需要任何黑客攻击。这一切都可以通过本机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>

Answer 2

要像这样居中对齐div，您需要做的只是向margin:auto;添加#body-div。保证金是根据div的宽度计算的。

所以在你的CSS中，你只需要添加：

#body-div{
   margin:auto;
}

中心主体，最大宽度为bootstrap 4

2 个答案: