Question

我在Twitter Bootstrap 3中有一个固定的顶部导航栏。
一切都很好，直到1350px。在1350px之后，导航栏内容之间会出现间隙。所以我想把我的导航栏放在中心位置。

我在this，this和this上查看了答案。他们都没有为我工作。

这是我的小提琴：http://jsfiddle.net/mcqHE/56/
目前我使用的是Navbar 1 为了尝试居中导航栏，我将Navbar 2添加到小提琴中。

以1500像素宽度检查小提琴 *导航栏1是一行，没有居中且有间隙 *导航栏2居中，没有间隙，但它是两个衬里似乎原因是这条规则：@media (min-width: 1200px) .container { max-width: 1170px; }

那么如何使导航栏居中，如果宽度大于1350px，则一行？

Answer 1

这是你问题的一个问题： - ）

您需要在css中添加以下行：

@media screen and (min-width:  1350px) {
   .navbar { text-align: center; }
   .navbar-header { display: inline-block; float: none !important; }
   .navbar-collapse.collapse { display: inline-block !important; }
}

以下是http://jsfiddle.net/myN2s/的解决方案。

如果你解决了这个问题，请告诉我。

每当您想要居中元素时，您需要将text-align:center添加到父元素，将display: inline-block添加到要水平居中的元素。这些都不能浮动（这非常重要）。

Answer 2

此修复程序将影响您网页上的所有样式。但我想这就是你要求的，没有足够的空间放在一条线上。 http://jsfiddle.net/mcqHE/58/

* {
    font-size:10px;
}

Answer 3

虽然以下答案涵盖了大部分内容，但我注意到菜单仍然没有单行，以下是我所做的以下更改：

1）是的，它是创造双间隙的宽度，但主要罪魁祸首是.container。因此，请使用课程<div>

删除.container

2）添加此CSS以使菜单项居中：

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

3）最后这个：

.collapse.navbar-collapse.in{ display: inline-block !important; }

将两个<ul>元素绑定在一起。

其他：

如果您想要标题＆＃39; Navbar＆＃39;要集中注意力，你可以这样做：

.navbar-header { float: none; }

这里是 JSFiddle.

分辨率> effect ＆gt; 1350px。

Answer 4

对于导航栏1将以下css添加到此div div class =“navbar-collapse navbar-part2 collapse

max-width: 1350px;
margin-left: auto;
margin-right: auto;

最大宽度将确保导航部分不会超过1350px margin-left：auto和margin-right：auto将导航中心。

我认为这就是你追求的目标？如果不是抱歉！

在Twitter Bootstrap 3中固定用于大屏幕的固定顶部导航栏

4 个答案:

其他：