如何创建一个以引导程序导航栏为中心的div？

我创建了一个包含徽标（左侧）和两个链接（右侧）的引导程序导航栏，但我想将它们放在导航栏中居中的div中，以便徽标或链接不会延伸到jumbotron 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>

来源

2017-02-11 RT5754

您可以通过以下方式完成此操作。只需将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，以便它不与超大屏幕高度方向重叠。

希望这会有所帮助！

来源

2017-02-11 09:54:13 neophyte

感谢这帮助 – RT5754

很高兴我可以帮忙！ – neophyte

如何创建一个以引导程序导航栏为中心的div？

回答

相关问题