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

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

解决方案1 ：使用Javascript（如果需要，可以使用Jquery）来检测左侧和右侧div的高度，并告诉它们具有相同的高度。

您可以在第二个内容div上应用此解决方案，以使高亮文本上方的espace具有相同的高度。

或者在比较两者的高度后，在较小的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＆lt; 3这是一个原生CSS3 fonctionnaly，它可以让您轻松获得所需的divs＆＃39;位置。 http://flexboxfroggy.com/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我认为这两种方法都适用于bootstrap并且会尊重响应式需求。

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>

Bootstrap网格

2 个答案: