Question

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

Answer 1

您可以通过以下方式执行此操作。只需将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"。

即可

＆＃13;

<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>

＆＃13;

注意：

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

希望这有帮助！

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

1 个答案: