如何拥有两个导航栏，一个只有50％宽度并居中？

Question

我使用2个导航栏创建了一个包含 bootstrap 2.3.2 的页面。

navbar 1采用原始bootstrap风格和全宽 - ＆gt;没问题。

导航栏2是

1. 自定义样式 - ＆gt;解决。
2. 约50％的宽度并居中

问题：

无法将宽度设置为50％并且无法使其居中。

我尝试将span6 offset3添加到<div class="navbar"> - ＆gt;仍然全宽。将类添加到parent-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类增加了保证金，所以：

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

<强> 更新 ： 这是一个小提琴（来自上一个版本）：http://jsfiddle.net/byk64qr3/5/