在引導網格

Question

列行的垂直對齊假設你有使用Twitter的引導一兩欄佈局，在其中你想有相互垂直對齊的特定行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 1</h2> 
 
     <p>Optional content of variable height.</p> 
 
     <p><strong>Align this vertically...</strong></p> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 2</h2> 
 
     <p><strong>...with this</strong></p> 
 
    </div> 
 
    </div> 
 
</div>

垂直對齊對於表格佈局是可行的，然而，Bootstrap列的尺寸和響應行爲丟失：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <table class="row"> 
 
    <thead> 
 
     <tr> 
 
     <th scope="col"><h2>Column 1</h2></th> 
 
     <th scope="col"><h2>Column 2</h2></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td><p>Optional content of variable height.</p></td> 
 
     </tr> 
 
     <tr> 
 
     <td><strong>Align this vertically...</strong></td> 
 
     <td><strong>...with this</strong></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

另一種選擇是拆分行，但是佈局在較小的分辨率上以錯誤順序摺疊。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 1</h2> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <h2>Column 2</h2> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <p>Optional content of variable height.</p> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <strong>Align this vertically...</strong> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <strong>...with this</strong> 
 
    </div> 
 
    </div> 
 
</div>

你如何達到同樣的效果，同時仍保持引導的列的行爲？是使用表格佈局的方式還是死衚衕？如果不使用JavaScript來將行定位到計算出的偏移量，那麼它是否可行？

編輯：我的目標是讓行的頂部對齊，就像在表格佈局中一樣。

Answer 1

對於我所知道的，我會測試這些解決方案。

解決方案1 ​​：使用Javascript（如果你想要JQuery的話）來檢測左邊和右邊div的高度，並告訴它們有相同的高度。

您可以將此解決方案應用於第二個內容div，使粗體文本上方的空間高度相同。

或者在比較兩者的高度後，在較小的div（需要對齊的粗體文本）中添加..例如作爲需要的margin-top。

無論如何，如果你有他們的兩個高度，你將有足夠的信息來找到一種方法。多種解決方案在這裏是可能的，我讓你找到更適合你的背景和需求的解決方案。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6 leftcolumn"> 
     <h2>Column 1</h2> 
     <div class="astallas"><p>Optional content of variable height.</p></div> 
     <p><strong>Align this vertically...</strong></p> 
    </div> 
    <div class="col-sm-6 rightcolumn"> 
     <h2>Column 2</h2> 
     <div class="astallas"></div> // make this empty div have the same height that the left one with variable content 
     <p><strong>...with this</strong></p> 
    </div> 
    </div> 
</div> 

解決方案2（但也有一些瀏覽器incompatibilties）：使用Flexbox的< 3這是一個原生CSS3 fonctionnaly是給你一個簡單的方法讓你的想的div的立場。 http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我認爲，這兩個作品與引導，並會尊重響應需求。

Answer 2

你可以做這樣的事情來獲得等高行：

<style> 
.centered { 
    text-align: center; 
    font-size: 0; 
    } 

.centered .myheight{ 
    float: none; 
    display: inline-block; 
    text-align: left; 
    font-size: 13px; 
    vertical-align: top; 
    margin-bottom: 5px; /*add this if you want to give some gap between the rows. */ 
    } 
</style> 


<div class="container-fluid"> 
<div class="row centered"> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content ...<br> 
     Some more content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div> 
    <div class="col-sm-4 myheight"> 
     Some content 
    </div>                
</div> 
</div>