修改 twitter 引导导航栏

Posted 2023-03-06

【中文标题】修改 twitter 引导导航栏

【英文标题】：Modify twitter bootstrap navbar

【发布时间】：2012-05-21 00:55:33

【问题描述】：

我一直在尝试，目前所有链接都向左对齐，而我真正想要的是让它们居中。

在另一篇文章中我读到你使用这个

.tabs, .pills 
  margin: 0 auto;
  padding: 0;
  width: 100px;

但这对我不起作用

我需要在 css 中进行什么更改才能实现这一点，我知道我将修改后的 css 放入引导程序并覆盖。

任何帮助表示赞赏

这是我的标记

布局/应用程序

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

    <a class="brand">Newbridges</a>  

  <% if user_signed_in? %>
    <div class="nav-collapse">
      <ul class="nav ">
      <%= render "shared/navbarlogin" %>
    </div>

    <% else%>
    <div class="nav-collapse">
      <ul class="nav">

      <%= render "shared/navbar" %>
    </div>
    <% end %>

我也试过了

.nav > li 
  float: none;
  display: inline-block;
  *display: inline;
  /* ie7 fix */
  zoom: 1;
  /* hasLayout ie7 trigger */

.nav 
  text-align: center;

【问题讨论】：

你能创建一个jsFiddle demo 来显示你目前拥有的 Twitter Bootstrap 导航栏吗？

你的意思是this？之前回答过一个这样的问题，找到here。

感谢您的建议，不过似乎对我不起作用

@Richlewis 你能发布你的标记或演示以便我们看看吗？

更新问题，您还需要标记吗？

【参考方案1】：

您可以通过将菜单项设置为 display:inline-block 而不是 float:left 来居中导航菜单，如下所示：

.navbar .nav,
.navbar .nav > li 
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;


 .navbar-inner 
    text-align:center;

虽然我建议您创建自己的类来定位您希望居中的导航栏菜单，但这样您就不会打扰引导程序默认值，也不会弄乱您页面中可能存在的其他导航部分。你可以这样做：

^{注意导航栏容器中的 .center 类}

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

然后您可以像这样定位.center 类：

.center.navbar .nav,
.center.navbar .nav > li 
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;


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

演示：http://jsfiddle.net/C7LWm/show/

编辑：忘记将子菜单项重新对齐到左侧，这是修复：

CSS

.center .dropdown-menu 
    text-align: left;

演示：http://jsfiddle.net/C7LWm/1/show/

【讨论】：

非常感谢您的帮助，现在就试试这个

【参考方案2】：

另外，如果您希望两边（“项目名称”之前和“下拉菜单”之后）的空格是对称的，请添加以下内容：

.navbar .nav, .navbar .nav > ul

    float: right

此外，使用以下内容（自 Bootstrap v2.0.4 起）似乎仍无法使导航栏居中：

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container-fluid">
        .
        .
        .
        </div>
      </div>
</div>

你需要改成

<div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
        <div class="container">
        .
        .
        .
        </div>
      </div>
</div>

（摘自 Andres llich 提供的样本；只是他错过了更改）

现在它对我有用...

【参考方案3】：

我知道这是一篇旧帖子，但我在谷歌搜索中也注意到了几次。我想直接设置记录，以便在 twitter bootstrap 中将导航栏居中，因为当前接受的方法没有错，但由于 twitter bootstrap 支持这一点，所以不需要。

实际上有一种比手动修改更好的方法。这将通过使用 twitter bootstrap 中已有的内容来减少代码。

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">RIZEN</a>
            <ul class="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forums</a></li>
            </ul>
        </div>
    </div>
</div>

故障 第一行非常简单，因为我们正在创建导航栏，将其设置在视口上的固定位置到顶部，然后通过反转颜色主题将白色交换为黑色。

接下来我们将分配 navbar-inner，它或多或少说，如果可能的话，设置一个最小高度，这是实际颜色样式的来源，而不是上面的行。

这里是 IMPORTANT 行，因为我们正在放弃导航栏的流畅布局并只使用一个容器。这设置了一个固定的带边距，使内部内容与屏幕中心对齐。这是通过设置自动边距和设置宽度来完成的。

这个方法会做你想做的事，因为你实际上通过不添加额外的代码和使用 twitter 引导程序正确使用脚手架并且没有额外的代码膨胀，在标头请求中保存 kb。我在自己的项目中使用过这种方法，并在我当前的项目中继续使用它。修改 TBS(twitter bootstrap) 的危险在于你会失去代码的一致性，如果将来你想改变一些东西，你必须记下你所做的改变，否则事情可能不会按预期工作。

希望这会有所帮助。此外，如果您想要一个工作示例，只需查看 twitter bootstrap 的主页，因为它就是这样。

【讨论】：

这对我有用，但我必须在容器上设置一个宽度才能使其工作。

您根本不需要设置宽度。这也应该适用于 Bootstrap 2，以防万一您使用的是 3，但我相信它应该是向前兼容的

【参考方案4】：

上面的居中 css 仅适用于未折叠的导航栏。

不过，当导航栏折叠时，这并不理想。默认情况下，每个折叠的导航栏项目都在自己的行上，就像下拉菜单一样。但是上面的 css 试图将所有折叠的项目推到同一行，这不太理想。

我使用了这个在媒体查询中包装居中 css 的小修复，因此它仅在未折叠的导航栏上触发：

@media (min-width: 768px) 
    .center.navbar .nav,
    .center.navbar .nav > li 
        float:none;
        display:inline-block;
        *display:inline; /* ie7 fix */
        *zoom:1; /* hasLayout ie7 trigger */
        vertical-align: top;
    
    .center .navbar-inner 
        text-align:center;
    

（使用 bootstrap 3.1.1 测试）