Question

我尝试添加浮动并使用一些Bootstrap类来尝试让它工作无济于事。不知道我错过了什么。我想让ul或所有项目居中。以下是导航标记：

<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
    </nav>
    <h1>Home</h1>
</div>

此外，在较小的屏幕上，导航的默认行为是叠加在一起。我想这样做，以便活动链接是唯一显示的（或者可能与另一个链接），但它可以水平滚动其他链接。我打算使用Scrollspy，因此如果有所不同，活动链接会自动更新。不知道如何处理 - 任何想法将不胜感激。

Answer 1

因为li元素是块级的（display :block是通过Bootstrap的CSS应用的），所以您需要做的就是在text-align: center上添加ul：

.navbar-nav {
  text-align: center;
}

我创建了一个更新的小提琴，展示了这个here。

不确定ScrollSpy效果，但我假设你可以简单地将链接集合作为参数传递给参数。

希望这有帮助！：）

Answer 2

我建议使用'bootstrap navbar example'（http://getbootstrap.com/components/#navbar）。具体来说，在你的情况下，我会使用这个修改版本：

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
      <nav class="navbar navbar-default">
          <div class="container-fluid">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Brand</a>
              </div>
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">Link</a></li>        
                </ul>                
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Link</a></li>                  
                </ul>
              </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
      </nav>
  </body>
</html>

Bootstrap：在Nav中居中内容并在较小的屏幕上更改默认beavior

2 个答案: