重叠的行 - 很难解释 - Bootstrap 3

Question

我不知道如何在不向您展示我想要实现的目标的情况下解释这一点：

我遇到的问题是搜索框不是固定的高度，我甚至可能想在左侧添加其他项目。理想情况下，每个结果都必须是自己的DIV。

如何使左侧手栏中DIV的高度完全与搜索结果的高度无关？

我希望这是有道理的。

编辑：对不起，如果我没有解释清楚，一旦它通过搜索框，基本上结果3跳到左边。我需要他们继续排队。所有结果DIV的类也需要相同。

Answer 1

我是这样做的。

<div class="container">
 <div class="row">
  <div class="col-sm-3">search box</div>
  <div class="col-sm-9">
    <div class="row">
      <div class="col-sm-12">result 1</div>
    </div>
    <div class="row">
      <div class="col-sm-12">result 2</div>
    </div>
    <div class="row">
      <div class="col-sm-12">result 3</div>
    </div>
  </div>
 </div>
</div>

Answer 2

HTML

<div class="row">

 <div class="col-md-4">  <!-- Your left box -->

 </div>

 <div class="col-md-8"> 

    <div class="results"> <!-- Your right Box1 -->
    </div>

    <div class="results"> <!-- Your right Box2 -->
    </div>

    <div class="results"> <!-- Your right Box3 -->
    </div>

 </div>

</div>

CSS

.results {

     width:  100%;
}

如果要在第一列中添加其他框，请使用此

<div class="row">

 <div class="col-md-4"> 

    <div>  <!-- Your left box -->
    </div>

    <div>  <!-- Your other box -->
    </div>

    ...

 </div>

 <div class="col-md-8"> 

    <div class="results"> <!-- Your right Box1 -->
    </div>

    <div class="results"> <!-- Your right Box2 -->
    </div>

    <div class="results"> <!-- Your right Box3 -->
    </div>

 </div>

</div>

Answer 3

“如何使左侧列中DIV的高度完全与搜索结果的高度无关？”

这已经是默认值。困难的是匹配不同列中元素的高度（这在Twitter Bootstrap 3中是不可能的，不使用JS，因为网格系统基于浮点数，而不是基于flexbox）。