23

假设我们有以下使用 Twitter Bootstrap 2.0 的导航栏标记。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner pull-center">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

.nav内部居中的最佳方式是什么navbar-inner？

我只是想出了添加自己的 CSS 样式：

@media (min-width: 980px) {
    .pull-center {
        text-align: center;
    }
    .pull-center > .nav {
        float:none;
        display:inline-block;
        *display: inline; *zoom: 1;
        height: 32px;
    }
}
4

5 回答 5

5

覆盖导航栏中容器的宽度从autoto 960px。

.navbar-inner .container {width:960px;}
于 2012-06-14T00:56:27.983 回答
4

To align it in the center with a dynamic width, I used the following:

HTML:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      ....
    </ul>
  </div>
</div>

CSS:

.navbar .navbar-inner {
    text-align: center;
}
.navbar .navbar-inner .nav {
    float: none;
    display:inline-block;
}

Didn't test it, but I guess only display:inline-block; could be a problem, which is supported in all browsers except for IE7 and lower..

http://caniuse.com/inline-block

于 2013-06-01T13:14:45.883 回答
3 
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
于 2013-04-24T17:06:22.420 回答
1

只需按照http://twitter.github.com/bootstrap/components.html#navbar使用容器类就可以使我的导航居中；但是，它是固定宽度并且格式关闭（导航栏的高度增加了，很可能我做错了）。

最好让导航以基于百分比的流畅宽度居中，并具有基于某些最小支持的设备屏幕尺寸的最小宽度和 nowrap。（我是响应式媒体查询的新手，也许这是基于百分比的更好选择。）

仍在研究最小宽度和 nowrap，但引导容器类固定宽度的另一种替代方法是添加 navbar-inner 的子项。我想知道是否有内置的引导解决方案，例如 row-fluid 和 spanN 类，但我也无法在导航中正确格式化。

<div style="margin-left: 15%; margin-right: 15%;">
于 2012-07-27T12:48:38.537 回答
0

我发现这有用且干净：

<div class="navbar navbar-fixed-top">
  <div class="container">
      <ul class="nav">
      <li class="active"><a href="#">HOME</a></li>                        
      <li><a href="#contact">CONTACT</a></li>
      </ul>        
  </div>
</div>

其中，CSS 是：

.container {left:auto;right:auto}

这将使 div 在当前导航栏宽度的基础上居中。

响应性是分开管理的。

于 2013-02-07T23:06:15.607 回答