3

使用 twitter bootstrap，我正在尝试使用下面的代码在主从 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;}

在此处输入图像描述

解决了

导致我出现问题的原因是，我的 < div class="container-fluid" > 没有被外部行类包裹，例如 < div class="row-fluid" >。一旦我这样做了，一切都很好。

4

3 回答 3

2

Twitter Bootstrap now provides examples, which contain a Master/Detail template. There's no need for pull-right or the the quote hack. Here's adaam's example with the hack removed, working perfectly: http://jsfiddle.net/2Zy6D/

于 2013-07-08T13:36:36.173 回答
2

您在此处缺少结束语：

<ul class="nav nav-list span3 well pull-right>
于 2013-05-24T22:17:09.117 回答
1

以及凯文的修复：

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

基于未知您可能有其他代码影响 div 的宽度导致它们彼此重叠使用较低的跨度数来补偿这样（跨度数必须加起来为 Bootstrap 最大值 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>

通常不会建议这样做，因为它不是严格正确的，但因为这只是一个后端页面，它似乎没问题所以这里有一个 jsFiddle（有点hacky，但是哦）：http: //jsfiddle.net/7MD6m/

于 2013-05-24T22:30:15.000 回答