在 Twitter Bootstrap 3 中为大屏幕居中固定顶部导航栏

Posted 2023-03-05

【中文标题】在 Twitter Bootstrap 3 中为大屏幕居中固定顶部导航栏

【英文标题】：Centering fixed top navbar for large screens in Twitter Bootstrap 3

【发布时间】：2014-06-18 11:32:39

【问题描述】：

我在 Twitter Bootstrap 3 中有一个固定的顶部导航栏。 一切正常，直到 1350 像素。在 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 则为一行？

【问题讨论】：

能否请您删除所有这些内联样式并编写单独的 CSS？ （这样看你有什么有点乱）

@caramba 我删除了内联样式并更新了小提琴。

"something1" 和 "something2" 也必须居中或始终位于同一行但在屏幕右侧？

【参考方案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。这些都不能浮动（这非常重要）。

【讨论】：

嗯，这似乎适用于大屏幕，navbar-header navbar-collapse.collapse 打破了小屏幕的折叠。

【参考方案2】：

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

* 
    font-size:10px;

【参考方案3】：

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

1) 是的，这是造成两个间隙的宽度，但主要的罪魁祸首是.container。所以删除 <div> 和类 .container

2) 添加此 CSS 以使您的菜单项居中：

.navbar-inner  text-align: center; 

3) 最后这个：

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

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

补充：

如果您希望标题“导航栏”也居中，您可以这样做：

.navbar-header  float: none; 

这是JSFiddle.

它是 effect，分辨率 > 1350 像素。

【讨论】：

这似乎不适用于小屏幕。它适用于 1350px+

@trante 明白你的意思，css 选择器在打开和关闭时都针对navbar collapse，进行了更改，这就是looks.

好吧，我不喜欢“导航栏”文本居中。因为在这种情况下会出现一个新行，它会使导航栏高度变大:)

【参考方案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 将使导航居中。

我想这就是你所追求的？如果不是对不起！