使用twitter bootstrap在master-detail UI中创建侧边栏

Question

使用twitter bootstrap，我正在尝试使用下面的代码在master-detail UI中创建侧边栏。问题是侧边栏总是出现在主要内容或详细信息部分的正上方，如下图所示。任何有关修复此问题的建议都会有所帮助感谢。

<div class="container-fluid">
   <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
       </div>
  </div>

  <div class="row-fluid">
     <ul class="nav nav-list span3 well pull-right">
      <li> <a href="#"> Home </a> </li>
      <li> <a href="/posts"> Post </a> </li>
     </ul>

    <div class="span9 well">

    </div>

 </div>
</div>

这是唯一使用的自定义CSS：

 body{padding: 60px 10px 10px 10px;}

解决

导致我的问题的是，我的＆lt; div class =“container-fluid”＆gt;没有用外行类包裹，例如＆lt; div class =“row-fluid”＆gt;。一旦我这样做，一切都很好。

Answer 1

你在这里错过了一个结束语：

<ul class="nav nav-list span3 well pull-right>

Answer 2

Twitter Bootstrap现在提供examples，其中包含Master/Detail template。不需要pull-right或引用黑客。这是adaam删除黑客的示例，完美运行：http://jsfiddle.net/2Zy6D/

Answer 3

和凯文的解决方案一样：

<ul class="nav nav-list span3 well pull-right">

基于未知，您可能有其他代码影响div的宽度导致它们彼此叠加使用较低的跨度数来补偿这样（跨度数必须加起来最大值为12即你的代码中的9 + 3 [在正常情况下会起作用]）：

<div class="container-fluid">
   <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
       </div>
  </div>

  <div class="row-fluid">
     <ul class="nav nav-list span3 well pull-right">
      <li> <a href="#"> Home </a> </li>
      <li> <a href="/posts"> Post </a> </li>
     </ul>

    <div class="span8 well">

    </div>

 </div>
</div>

通常不建议这样做，因为它不是严格正确，但因为这仅适用于后端页面，所以它似乎是O.K.所以这里是一个jsFiddle（有点hacky但很好）：http://jsfiddle.net/7MD6m/