如何创建以引导导航栏为中心的 div？

我创建了一个包含徽标(左(和两个链接(右(的引导导航栏，但我想将它们放在导航栏中居中的div 中，以便徽标或链接不会超出巨型div 的边缘。有什么建议吗？谢谢。

<body>
    <div class="container-fluid">
    <nav class="navbar navbar-fixed-top bg-danger">   
        <div id="nav-center" class="center">
            <a class="navbar-brand" href="index.html">
                <img src="Images/logo-white.png" width="200">
            </a> 
            <ul class="nav navbar-nav pull-xs-right">
                <li class="nav-item">
                    <a class="nav-link" href="signup.html">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Login</a>
                </li>
            </ul> 
        </div>
    </nav>
    </div> 
    <div class="container">
        <div class=" jumbotron">
            <h1>Welcome</h1>
        </div>
    </div>
</body>

您可以通过以下方式执行此操作。只需将class="col-lg-6 col-lg-offset-3col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"添加到具有id="nav-center"。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
             
           </style>
           </head>
           <body>
           <div class="container-fluid">
    <nav class="navbar navbar-fixed-top bg-danger">   
        <div id="nav-center"  class="col-lg-8 col-lg-offset-2col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
            <a class="navbar-brand" href="index.html">
                <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" width="100">
            </a> 
            <ul class="nav navbar-nav pull-right">
                <li class="nav-item">
                    <a class="nav-link" href="signup.html">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Login</a>
                </li>
            </ul> 
        </div>
    </nav>
    </div> 
    <div class="container">
        <div class=" jumbotron">
            <h1>Welcome</h1>
        </div>
    </div>
  </body>
  </html>

注意：

根据您的图像调整css，使其不会与巨型高度重叠。

希望这有帮助！

相关内容

最新更新

热门标签：