无法居中 Bootstrap 导航栏

Posted 2023-03-29

【中文标题】无法居中 Bootstrap 导航栏

【英文标题】：Can't Center Bootstrap navigation bar

【发布时间】：2013-11-27 22:23:18

【问题描述】：

我试图将其居中：http://jsfiddle.net/MikeStardust/hwhS5/ 导航栏但没有运气...

中心是指在导航中心的一行中对齐的元素... 查找了一些解决方案，但没有一个奏效，导致导航栏居中对齐，每行一个元素。

Bar html:（jsfiddle上的css & html）

 <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="http://chaoticunited.com/forums">Forums</a></li>
        <li><a href="servers.html">Servers</a></li>
        <li><a href="help.html">Help Center</a></li>
        <li><a href="#" data-toggle="modal" data-target="#vote">Vote</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.navbar 

我有这个：

并且想要这个：（来自photoshop的结果）

【问题讨论】：

你能添加一张你想要的图片吗？我不确定我是否按照您的意愿行事。

你能显示截图吗，jsfiddle 无法正常理解

当然，谢谢你的尝试：)

另外，这是一个适当的Bootstrap Skeleton Fiddle，其中添加了必要的库作为外部资源。你可以 fork 它以便于开发并在那里添加你的代码。

我有这个：i.imgur.com/JVh05N1.png 并且想要这个：（photoshop 的结果）i.imgur.com/B3UcOU9.png

【参考方案1】：

尝试将.navbar-nav 的显示值更改为inline-block，然后在其父级上应用text-align 以控制对齐。

如果您需要更改移动视图对齐方式，您可以在该断点处重新应用 text-align。

.navbar-nav 
    display: inline-block;


.navbar-default 
    text-align: center;

示例：http://jsfiddle.net/hwhS5/2/

【讨论】：

我尝试在不同的导航栏、相同的类上做同样的事情，但没有成功，它只是将下拉内容居中：jsfiddle.net/MikeStardust/z5yyt

我只花了 2 个小时寻找解决方案，这是第一个有效的答案。我很惊讶它没有更多的赞成票。我不可能是唯一有这个问题的人！

【参考方案2】：

使用引导程序 class="justify-content-center"