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

问题描述

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

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>

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

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.

推荐答案

尝试一下:

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

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

Requires vendor prefixes for IE10. Not supported below IE10.

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

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