修改Twitter Bootstrap导航栏

小编典典

修改Twitter Bootstrap导航栏

css

我一直在尝试修改twitter bootstrap导航栏，此刻所有链接都向左对齐，而我真正想要的是将它们置于中央。

在另一篇文章中，我读到您使用了这个

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

阅读 383

2020-05-16

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

编辑：忘记了重新调整子菜单项到左侧，这是解决方法：

CSS

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

2020-05-16