如何在兩個Bootstrap列上獲得相同的高度？

Question

我得到了我想要在同一HIGHT兩列。內容之後都是調整高度（高度自動）。所以有時候我的一個柱子的高度比另一個高。我希望它們處於相同的高度（並在內容後調整）。

我試圖與表單元格來解決這一點，但我did'nt得到它的工作（其中一列始終是10px的左右較小，則另一個）。我也嘗試使用row-eq-height，但沒有什麼區別。

所以誰能告訴我什麼是最好的方法是獲得兩個並列BS列（代碼中的col-md-3和col-md-7）以獲得相同的高度並自動調整爲內容？

這裏是我的標記：

<div class="row"> <!-- START BS ROW --> 
    <div class="col-md-1"> <!-- START BS COL-MD-1 --> 
    </div> <!-- END BS COL-MD-1 --> 
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 --> 
     <div class="singleheader-list-style"> <!-- START SINGLEHEADER-LIST-STYLE --> 
      <!-- CONTENT --> 
     </div> 
    </div> <!-- END BS COL-MD-3 --> 
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-7 --> 
     <div class="singleheader-content-style"> <!-- START SINGLEHEADER-CONTENT-STYLE --> 
      <!-- CONTENT --> 
     </div> <!-- END SINGLEHEADER-CONTENT-STYLE --> 
    </div> <!-- END BS COL-MD-7 --> 
    <div class="col-md-1"> <!-- START BS COL-MD-1 --> 
    </div> <!-- END BS COL-MD-1 --> 
</div> <!-- END BS ROW --> 

這裏是我的CSS：

/***** SINGLEHEADER CONTENT AREA STYLING *****/ 

.singleheader-content-style { 
    background-color:#fff; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
} 

.singleheader-content-style h1,h2,h3,h4,h5,h6 { 
    margin-top:0px; /* Change bootstrap default */ 
    color:#de1b1b; 
} 

/***** SINGLEHEADER LIST AREA STYLING *****/ 

.singleheader-list-style { 
    background-color:#fff; 
    border-left: 1px solid #9c9c9c; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
} 

.singleheader-list-style h1,h2,h3,h4,h5,h6 { 
    margin-top:0px; /* Change bootstrap default */ 
    color:#de1b1b; 
} 

我知道這個問題已經被問過上如此，但那些QA是舊的（從2013年）。而且因爲我猜想Boostraps從那以後就已經更新了。我創建了一個新的問題，看最好的辦法是什麼來解決這個2015年

是的，我知道這個問題是問例如這裏：How can I make Bootstrap columns all the same height?但QA是從2013年開始，我想知道是否有現在更好的方法來解決這個問題，例如彈性框以及如何去做。我一直在這裏看看：http://getbootstrap.com.vn/examples/equal-height-columns/但它不適合我。

Answer 1

我想你可以使用這個（Flexbox的技術），只需添加row-eq-height類row類旁邊有如下的CSS（以及一些修改CSS）

HTML

<div class="row row-eq-height"> 
    <!--Whatever content you want--> 
</div> 

CSS

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 
.singleheader-list-style { 
    background-color:#fff; 
    border-left: 1px solid #9c9c9c; 
    border-right: 1px solid #9c9c9c; 
    padding:20px; 
    height:100% /*--New Attribute--*/ 
} 
.singleheader-content-style { 
    background-color: #fff; 
    border-right: 1px solid #9c9c9c; 
    height: 100%; /*--New Attribute (just for sure in case your left col taller)--*/ 
    padding: 20px; 
} 

Hopr對你有幫助！

Answer 2

您可以使用jQuery了點。獲取較高元素的高度並將其設置爲較小的元素。有一個stackoverflow question about that，我用它過去，它的工作原理。