在引导网格

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>