Question

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

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;
}

Answer 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后跟词，因为流体行使用大量浮动我假设...还有左边距是问题，右边div有点浮动但实际上不是。

Answer 2

当你使用容器流体时，你更好地给出％而不是像素的所有值，尝试删除浮点数，边框左边的属性，而是将你的div正确放在你的span元素中。你不需要rightdiv leftdiv类，只是放置你的左边内容（span3）和右边的内容（span9）。只是一个例子..

行被邻近的内容拉伸

2 个答案: