Twitter Bootstrap 2.0 中的中心导航栏

Posted 2023-03-05

【中文标题】Twitter Bootstrap 2.0 中的中心导航栏

【英文标题】：Center Navbar in Twitter Bootstrap 2.0

【发布时间】：2012-04-25 02:35:49

【问题描述】：

假设我们使用 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>

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

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

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

【问题讨论】：

如何对齐？你的意思是span12 div 内的中心？

你在使用响应式引导样式表吗？

通过，刚刚测试了你的css，它工作正常。

【参考方案1】：

将导航栏中容器的宽度从auto 覆盖为960px。

.navbar-inner .container width:960px;

【讨论】：

您好，这有助于我获得标准视口，但如果我想要响应式版本怎么办？

我认为你想要变量 $gridRowWidth。至少这是 sass 变量。

【参考方案2】：

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

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

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

<div style="margin-left: 15%; margin-right: 15%;">

【参考方案3】：

我发现这很有用而且很干净：

<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 在当前导航栏宽度的基础上居中。

响应性是分开管理的。

【讨论】：

浏览器确实是最新版本。 -1 有什么问题？

【参考方案4】：

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

【参考方案5】：

为了以动态宽度使其居中对齐，我使用了以下方法：

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;

没有测试，但我猜只有display:inline-block; 可能是个问题，除IE7 及更低版本之外的所有浏览器都支持。..

http://caniuse.com/inline-block

【讨论】：

此外，您可以将 .nav-collapse 样式设置为与上述 .nav 相同的样式，以实现响应式导航

要覆盖.nav，有时需要将其指定为.navbar .nav，而不仅仅是.nav