Bootstrap表單元格對齊img響應崩潰

我想在一行中垂直對齊3個div。表格單元格工作正常，但如果我使用此方法垂直對齊，那麼響應性不起作用。Bootstrap表單元格對齊img響應崩潰

這是代碼：

<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是彼此相鄰，而不是在它們的頂部的。我已經嘗試了很多東西，但都沒有幫助。你能告訴我一些事嗎？

來源

2014-09-25 photoscene

查找到媒體查詢。這將解決你的問題。 – 2014-09-25 19:41:34

這是你的真實代碼還是錯字？ table.cell應該是表格單元 – 2014-09-25 19:43:08

我認爲你不應該嘗試重新定義Bootstrap類。不知道如何解決它，雖然沒有使用JavaScript或flexbox。 – ckuijjer 2014-09-25 19:44:33

只是改變

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

到

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

我想這和它爲我工作得很好

來源

2015-03-18 07:18:42

Bootstrap表單元格對齊img響應崩潰

回答

相關問題