Question

我正在尝试使用列系统在Bootstrap中构建一个导航栏，我遇到了一些问题，我不确定我做错了什么。

我想最终得到一个如下所示的导航栏：

enter image description here

我想要一行左侧对齐的列带有徽标，右侧对齐的列带有用户按钮，然后是第二行带有居中对齐的按钮。

我的想法是我可以使用“col-lg-6 col-md-6”类创建两个div，一个用于徽标，另一个用于用户按钮。这两个将创建第一个12列的行，这将强制跟随整个新行的标记。

但是，当我尝试这样做时，我最终会将所有内联运行并且无序运行。

enter image description here

我知道我可以通过添加自己的自定义css（这是我能够模拟第一个屏幕截图）来做到这一点，但我的偏好是坚持使用引导列系统，所以我的ad-hoc css不会有什么事情发生。我还想了解我做错了什么（这是我使用bootstrap的第一个项目，所以我仍然试图克服学习曲线）。

以下是此演示页面的代码：

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/additions.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">

            <div class="collapse navbar-collapse col-lg-6 col-md-6" >
                <ul class="nav navbar-nav  navbar-left">
                    <li><img src="images/genericLogo.png"><!-- <a href="#">MySite.com</a> --></li>
                </ul>
            </div> 

            <div class="collapse navbar-collapse navbar-right col-lg-6 col-md-6">
                <div class="dropdown">
                    <button id="userMenu" class="btn dropdown-toggle btn-primary" type="button" data-toggle="dropdown">
                        <span>username@domainName.com </span><span class="caret userButton"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="userMenu">
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">View Details</a></li>
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Edit</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Logout</a></li>
                    </ul>
                </div>
            </div>                


            <div class="collapse navbar-collapse" id="mainNav">
                <ul id="navlist" class="nav navbar-nav">
                    <li><a href="#">Reports</a></li>
                    <li><a href="#">Account Management</a></li>
                    <li><a href="#">Messages</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Request a Quote</a></li>
                    <li><a href="#">MainSite.com</a></li>
                </ul>
            </div>

            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

        </div>
    </div>


    <div class="container-fluid">
      <h1>Test</h1>



      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-6">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-6">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
      <div class="demorow col-lg-1 col-md-2 col-sm-6 col-xs-12">testitem <br />testItem</div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

额外的css

.demorow{
    background-color:gray;
    padding:10px;
    border:1px solid black;
}

/* Centering Navbar items */
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}
.navbar .navbar-collapse {
  text-align: center;
}

/*Adding padding to content for a fixed navbar*/
body { 
    padding-top: 110px; 
}

/*Adding padding to content for a fixed navbar when nav items are collapsed*/
@media screen and (max-width: 768px) {
    body { padding-top: 40px; }
}


/* Make dropdown menu items the same width as the dropdown wrapper*/
.dropdown{
    width:100%;
}
.dropdown-menu{
    width:100%;
}

/* left alight dropdown text*/
.dropdown-menu > li {
    text-align:left;
}

任何帮助都将不胜感激。

Answer 1

您只需添加以下div元素即可在跟随行

之前

<div class="collapse navbar-collapse" id="mainNav">

添加以下div元素

<div class="clearfix"></div>

所以最终代码看起来类似于：

<!-- SOME CODE -->
<div class="clearfix"></div>
<div class="collapse navbar-collapse" id="mainNav">
<!-- SOME CODE -->

Answer 2

另一种方法是在新nav-justified中使用row。然后你可以消除自定义导航栏CSS ..

<div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
           <div class="collapse navbar-collapse" id="mainNav">
                <ul id="navlist" class="nav nav-justified">
                  <li><a href="#">Reports</a></li>
                  <li><a href="#">Account Management</a></li>
                  <li><a href="#">Messages</a></li>
                  <li><a href="#">Contact</a></li>
                  <li><a href="#">Request a Quote</a></li>
                  <li><a href="#">MainSite.com</a></li>
                </ul>
           </div>
      </div>
</div>

演示： http://bootply.com/bYJ5VOtuH5

Answer 3

您不应该尝试按照自己定义的列来构建导航栏，而是使用引导程序本机导航栏，它应该按照您的意愿执行，并且可以很好地折叠到较小屏幕的菜单按钮中。文档在这里：https://getbootstrap.com/components/#navbar。祝好运。

Bootstrap：导航栏列问题

3 个答案: