如何使 Bootstrap 列像表格单元格一样工作

Question

我试图让我的引导列像tds一样，或者找到其他方法让它们具有相同的高度和垂直居中的文本。我试过做display:table-cell黑客，但没有成功。我在下面做错了什么？

小提琴：https : //jsfiddle.net/DTcHh/18560/

<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>
<div class="row like-table-row">
  <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10">
      <p>
         Here's some text
      </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Here's some shorter text
       </p>
  </div>
  <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1">
       <p>
           Blah     
       </p>
  </div>
</div>

---

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.row.like-table-row { display: table-row; }
  .row.like-table.row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

Answer 1

除了删除float. 如果您不移除浮动，则会破坏表格布局。

.row.like-table-row {
    display: table-row;
}

.row.like-table-row > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid #000;
    float:none;
}

这应该工作得很好。

PS 我曾经经常使用这种技术，但自从Flexbox出现后就停止了。