當使用flexbox在其包含的行中垂直居中列時，如何將引導網格列堆疊在移動屏幕上？

Question

我是一個新的開發人員，試圖啟動並運行一個引導站點。 當然，我遇到了垂直對齊的典型新手問題。 我認為通過在我的.row元素中添加類.vcenter可以解決我的問題（至少對於垂直居中的情況）。 .vcenter類（基本上）具有display: flex和align-items: center屬性/值對。 這個想法來自Hashem Qolami對垂直對齊的優秀SO答案。

但是，當我調整瀏覽器窗口的大小時， 即使我將.col-xs-12類應用於每一列 ，網格列也不會像它們那樣堆疊。 相反，如果窗口變得足夠小，則列以非常丑陋的方式重疊。 這是一個帶有相關html / css的bootply 。 要查看我正在談論的內容，請導航至上面鏈接的bootply，然后單擊電話圖標以打開移動大小的屏幕。 如果你將窗口縮小到足夠小，那么列的重疊就會很難看。 更重要的是，列應該是堆疊的（如果你關閉.vcenter類，你可以看到）。

問題是我可以同時使用flexboxes和bootstrap網格系統，還是在這兩種情況下兩者之間缺乏兼容性？我想可能的解決方案是關閉display: flex移動屏幕的display: flex屬性或使用inline-block進行垂直對齊，但我正在尋找一個更基本的理論解釋，這里發生了什么。

這是來自bootply的代碼：

HTML

<!DOCTYPE html>
<html>
<head><!-- bootstrap css automatically included by bootply --></head>
 <body>
  <div class="container">
   <div class="row vcenter">
    <div class="col-xs-12 col-md-5 bluebox">
     <h1>Big Blue Box</h1>
    </div>
    <div class="col-xs-12 col-md-7 redbox">
     <h1>Big Red Box</h1>
    </div>
   </div>
  </div>
 </body>
</html>

CSS

/* CSS used here will be applied after bootstrap.css */

.bluebox {
    color: #FFF;
    background-color: blue;
}

.redbox {
    color: #FFF;
    background-color: red;
}

/* FLEXBOX CLASSES */

.vcenter {
  min-height: 100%;  /* Fallback for vh unit */
  min-height: 100vh; 

  display: flex; 
  align-items: center;

/* Bootply includes properties for cross-browser compatibility */
}

Answer 1

您可以在最小寬度的媒體查詢中將您想要的內容放在較大的視口上。

http://www.bootply.com/p4ndb1MiZK

刪除col-xs-12，不是必需的，所有的東西都是最后一列的全寬，所以如果沒有其他類的話，col-md下的任何東西都是全寬的，帶有相同的填充。

這里發生的是，如果你將樣式放在媒體查詢之外，它們適用於所有視口大小，如果你把flexbox放在min-width里面，那就是那個媒體查詢，直到另一個媒體查詢到達之后另一個值，如果有的話是一個。

Hashem Qolami是一個搖滾明星，他的代碼總是很穩定，但flex適用於現代瀏覽器，如果你打算在IE 8上看起來不錯，那么使用display：table和display：table-cell。

注意：我沒有縮進你的CSS，但是當樣式在媒體查詢中時，它們是縮進的。

當使用flexbox在其包含的行中垂直居中列時，如何將引導網格列堆疊在移動屏幕上？

問題描述

1 個解決方案

解決方案1
3 已采納 2014-12-16 22:31:37

當使用flexbox在其包含的行中垂直居中列時，如何將引導網格列堆疊在移動屏幕上？

問題描述

1 個解決方案

解決方案1 3 已采納 2014-12-16 22:31:37

解決方案1
3 已采納 2014-12-16 22:31:37