Css 引导程序3：如何制作居中导航栏

我见过一些类似于@Adam建议的Bootstrap的黑客，我发现这基本上是可行的：

    <div class="footer row">    

            <ul id="menu-main" class="list-inline text-center">
                <li class="text-center">
                    <%= link_to "Home", root_path  %>
                </li>
                <li class="text-center">
                    <%= link_to "About", root_path  %>          
                </li>
                <li class="text-center">
                    <%= link_to "Help", root_path  %>           
                </li>
                <li class="text-center">
                    <%= mail_to "e@streetofwalls.com", "Contact"   %>
                </li>
            </ul>
    </div>

---

但是，它不会像导航条一样在较小的宽度上塌陷。如果有人知道如何维护此功能，那就太好了。

这正是您想要的

如果希望将其作为固定页脚，只需将

navbar fixed bottom

类添加到

元素中即可

HTML

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>

   <div class="collapse navbar-collapse  navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
  </div>
</nav>

<ul class="nav navbar-nav centered-ul">
...
</ul>

.nav.navbar-nav{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
@介质（最小宽度：768px）{
.导航栏导航{
浮动：无；
}
}

#主菜单{
宽度：100%；
文本对齐：居中；
显示：块；
}
#菜单主李{
显示：内联块；
浮动：无；
垂直对齐：顶部；
}
#菜单主菜单a{
显示：块；
填充：10px；
}

我建议将导航栏的侧边距设置为25%：

CSS

@media (min-width: 768px){
    .navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
}

@media (min-width: 768px) {
  .centered-ul{
    margin-left:25%;
  }
}

HTML

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>

   <div class="collapse navbar-collapse  navbar-ex1-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
  </div>
</nav>

<ul class="nav navbar-nav centered-ul">
...
</ul>

...

您看过Grid System>Nesting Columns下的文档了吗查看bootstrap 3示例@Schmalzy-nav很酷，但我不想在页面上分散链接。我只有几个，所以我希望它们以正常间距居中。@Emerson查看我的。你要找的是顶部导航栏吗？如果是这样，请随意窃取代码。它是使用Bootstrap 3创建的。@Schmalzy是的。这就是我的想法。但是，我希望可以选择在小屏幕上折叠成垂直行。您的只有三个，所以您不需要它，但我的可能需要。@Ruben您使用的是

Respond.js

？IE8和IE9中的媒体查询需要它，有关详细信息，请参阅。@danza

表格布局：不需要修复，它只会帮助浏览器更快地生成表格。适用于Chrome