html - 推特 Bootstrap : Auto width for pill based menu

Question

我正在为网站使用 Twitter Bootstrap 。现在我将药丸用作菜单(使用 java 脚本)，但我希望它们自动填充菜单栏(使它们的大小相同)。

我不认为它是内置在 Bootstrap 中的，所以有人建议如何做到这一点吗？

  <div class="row">
    <div class="span12 ban text-center">
      <ul class="nav nav-pills"  style="display: inline-block;">
        <li class="active"><a href="#home" data-toggle="pill"><i class="icon-home"> Home </a></li>
        <li><a href="#Info" data-toggle="pill"><i class="icon-home ">Info </a></li>
        <li><a href="#Fotos" data-toggle="pill"><i class="icon-camera"></i> Foto's</a></li>
        <li><a href="#Contact" data-toggle="pill"><i class="icon-home "> Contact </a></li>
      </ul>
    </div>
  </div>

一张图说清楚:1

Answer 1

在 Bootstrap 3 中有一个新的 btn-group-justified 类可能适合你

<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>  

详情请见 http://getbootstrap.com/components/#btn-groups-justified