修改twitter bootstrap navbar [英] Modify twitter bootstrap navbar

问题描述

我一直在尝试修改twitter的bootstrap navbar，目前所有的链接都对齐到左边，当我真正想要的是它们是中心。

Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.

在不同的帖子中，我阅读了您使用此

In a different post i read that you use this

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

但这对我没有用。

我需要改变css来做这件事，我理解我把修改的css放在引导和覆盖。

What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.

任何帮助赞赏

这是我的标记

布局/应用程序

<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;
}

推荐答案

通过将菜单项设置为 display：inline-block 而不是 float：left ，如下所示：

You can center your nav menu by setting your menu items to display:inline-block instead of float:left like so:

.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;
}

虽然我建议你创建自己的类来定位你的navbar菜单到中心，这样你不会打扰引导默认值，并与您可能在您的页面中的其他导航部分混乱。您可以这样做：

Though i suggest you create your own class to target your navbar menu that you wish to center, this way you won't bother the bootstrap default values and mess with other nav sections you may have in your page. You can do it like so:

^{注意navbar容器中的.center类}

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

然后，您可以定位 .center 类如此：

And then you can target the .center class like so:

.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/

编辑：忘记重新对齐子菜单这是修正：

Edit: Forgot to realign the submenu items to the left, this is the fix:

CSS

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

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

这篇关于修改twitter bootstrap navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！