如何拥有两个导航栏，其中一个只有 50% 宽度且居中？

Question

我用 bootstrap 2.3.2 创建了一个带有 2 个导航栏的页面。

导航栏 1 是原始的 bootstrap 样式和全角 --> 没问题。

导航栏 2 是

自定义样式 --> 已解决。
宽度的大约 50% 并居中

问题：

无法将宽度设为 50%，也无法使其居中。

我尝试将 span6 offset3 添加到 <div class="navbar"> --> 仍然是全角。将类添加到父 div 也没有任何区别。

这是我的简化版 HTML:

<h3>two navbars, different styles</h3>

<!-- navbar one: full width -->
<div class="navbar">
  <div class="navbar-inner">
      <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

<!-- navbar two: custom styling, 50% width, centered -->
<div class="container navbartwo">
    <div class="span6 offset3 navbar"> <!-- Problem here -->
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>
</div>

这是一个 JSFiddle：http://jsfiddle.net/michi001/byk64qr3/1/

Answer 1

你几乎是对的，但是 container class 增加了边距，所以：

CSS

.navbar-snd {
  width: 50%;
  margin: 0 auto;
}

HTML

<h3>two navbars, different styles</h3>

<!-- navbar one: full width -->
<div class="navbar">
  <div class="navbar-inner">
      <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</div>

<!-- navbar two: custom styling, 50% width, centered -->
    <div class="navbar navbar-snd"> <!-- Problem here -->
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </div>

更新：这是 fiddle（来自上一版本）：http://jsfiddle.net/byk64qr3/5/

如何拥有两个导航栏，其中一个只有 50% 宽度且居中？

How to have two navbars, one only 50% width and centered?

twitter-bootstrap

twitter-bootstrap-2

导航栏 2 是

问题：

这是我的简化版 HTML: