0

我正在维护一个使用 bootstrap 2.3.2 的网页，我遇到了以下问题。页面分为侧边栏和主容器，主容器内有流动的行。这些行被侧边栏中的内容向下移动。谁能解释为什么会发生这种情况，和/或提出解决方法？下面是一些代码，在这里摆弄。

HTML：

<div class="container-fluid">
<div class="left-div">
    <p>Some content here</p>
    <ul class="nav nav-list">
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
    </ul>    
</div>
<div class="right-div">
    <div class="row-fluid">
        <div class="span6">
            <h3>Stuff here</h3>
        </div>
        <div class="span6">
            This row gets stretched vertically
        </div>
    </div>
    <div class="row-fluid">
        <p>This content gets pushed down</p>
    </div>
</div>   
</div>

CSS：

.left-div {
  width: 200px;
  background-color: #DDDDDD;
  float: left;
}

.right-div {
  margin-left: 220px;
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}
4

2 回答 2

1

首先，不要将像素与 % 混合（流体为 %），并尝试使用引导网格，您将获得更少的跳跃行为！

.right-div {
  /* --> margin-left: 220px; <-- */
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}


.left-div {
  /* --> width: 200px; <-- */
  background-color: #DDDDDD;
  /* --> float: left; <-- */
}

向左浮动是问题！不要使用带有流动行的浮点数或使用 clearfix 后记，因为我认为流体行大量使用浮动......另外，margin-left 是问题，right-div 有点浮动，但实际上不是。

于 2013-09-06T12:26:10.907 回答
0

当您使用容器流体时，最好以 % 而不是像素为单位提供所有值，尝试删除浮动、左边框属性，而不是将您的 div 正确放置在您的 span 元素中。您不需要 rightdiv leftdiv 类，只需放置您的左侧内容里面（span3）和里面的内容（span9）。只是一个例子..

于 2013-09-06T12:39:09.863 回答