重疊行 - 難以解釋 - 引導3

Question

我不知道怎麼解釋這個不只是顯示你的什麼，我試圖達到的畫面：

我的問題是搜索框不是固定的高度，我甚至可能想在左側添加其他項目。理想情況下，每個結果都需要成爲自己的DIV。

如何讓左手邊欄的DIV高度與搜索結果的高度完全無關？

我希望這是有道理的。

編輯：對不起，如果我沒有解釋得很好，基本上結果3跳轉到左側，一旦它通過搜索框。我需要他們繼續排隊。所有結果DIV的類都需要相同。

Answer 1

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

如果要添加其他盒子放到第一collumn使用這種

<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 2

「如何讓我的DIV的高度上一列左側完全無關的搜索結果的高度？」

這已經是每默認。難題在於匹配不同列中元素的高度（這在Twitter Bootstrap 3中是不可能的，因爲網格系統基於浮動，而不是在Flexbox上）。

Answer 3

我這樣做了。

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