Bootstrap 中的中心导航栏 [英] Center Navbar in Bootstrap

问题描述

如何使用引导程序将菜单居中?
HTML:

<div class='container-fluid container'><div class='navbar-header'><a class='navbar-brand' href='#'>Title</a>

<div id='navbar' class='navbar-collapse'>

<li><a href='#'>链接</a></li><li><a href='#'>链接</a></li><li><a href='#'>链接</a></li><li><a href='#'>链接</a></li>

</nav>

这是基本的，但我尝试了各种解决方案，它不会使菜单居中，它总是显示为左对齐.我可以将列表元素居中，但不能将列表 ITSELF 居中.

解决方案

试试这个:

.navbar-default >.container-fluid {显示:弹性；对齐内容:居中；}

需要 IE10 的供应商前缀.IE10以下不支持.

http://codepen.io/simply-simpy/pen/XjEZNW

How do you center the menu with bootstrap?
HTML:

<nav class='navbar navbar-default'>
    <div class='container-fluid container'>
      <div class='navbar-header'>
         <a class='navbar-brand' href='#'>Title</a>
      </div>
      <div id='navbar' class='navbar-collapse'>
          <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>
      </div>
    </div>
  </nav>

It is basic and yet I have tried various solutions and it will not center the menu, it always appears align left. I can center the list elements, but not the list ITSELF.

解决方案

Try this:

.navbar-default > .container-fluid {   
    display: flex;
    justify-content: center;
}

Requires vendor prefixes for IE10. Not supported below IE10.

http://codepen.io/simply-simpy/pen/XjEZNW

这篇关于Bootstrap 中的中心导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！