Bootstrap网格中列行的垂直对齐

Question

假设您有一个使用 Twitter Bootstrap 的两列布局，您希望其中的特定行彼此垂直对齐：

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

如何在保持 Bootstrap 列的行为的同时获得相同的结果？使用表格布局是可行的方式还是死路一条？是否可以不借助 JavaScript 将行定位到计算的偏移量？

编辑：我的目标是让行的顶部与表格布局中的情况一样对齐。

Answer 1

你可以这样做来获得等高的行：

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

Answer 2

据我所知，我会测试这些解决方案。

解决方案 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（但与某些浏览器不兼容）：使用 Flexbox http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我认为这两种方法都适用于引导程序，并且会尊重响应式需求。