Question

我正在尝试连续垂直对齐3个div。表格单元格工作正常，但如果我使用此方法垂直对齐，则响应性不起作用。

这是代码：

<div class="container">
     <div class="row">
          <div class="col-md-4 col-xs-6">
               <p>some text</p>
          </div>
          <div class="col-md-4 col-xs-6">
               <p>some text</p>
          </div> 
          <div class="col-md-4 col-xs-12">
               <img class="img img-responsive" src="/theme_classy/static/img/clock2.png"/>
          </div>
     </div>
</div>

css如下：

.row {
display: table;
}
.col-md-4 {
float: none;
display: table.cell;
vertical-align: middle;
}

由于在移动视图中没有浮动，因此cols彼此相邻而不是在它们之上。我尝试了很多东西，但没有一个帮助过。你能给我一些建议吗？

Answer 1

只需更改

.col-md-4
{
display: table-cell;
}

到

.col-md-4
{
display: table-row;
}

我试过这个，它对我来说很好用

Bootstrap表格单元格与img-responsive对齐崩溃

1 个答案: