如何垂直居中引導列內容塌陷垂直於小屏幕

我使用的引導3.3.7，並有一排，我需要：

的列當屏幕足夠寬時
列內容當水平時要垂直居中
垂直堆棧的列，當屏幕太窄時

列高不是彼此相同或提前知道。我如何實現我的三個目標？

詳細信息：

我有一個可視化組件在我的網頁，對LHS的圖像，並在RHS在媒體塊一些文本。媒體塊比圖像高（確切地說，多少取決於屏幕寬度和文本的包裝）。

我們正在使用引導3，所以這個基本的HTML是：

<Row> 
    <Col md={6}> 
    <img src="myimage.jpg"/> 
    </Col> 
    <Col md={6}> 
    <div>a media block</div> 
    <div>another media block</div> 
    <div>etc</div> 
    </Col> 
</Row>

使視覺設計看起來乾淨整潔，我需要垂直居中的LHS的圖像。要做到這一點，我已經使用柔性框：

.eq-height-cols-wrapper: { 
    display: flex; 
} 

.eq-height-col: { 
    margin-top: auto; 
    margin-bottom: auto; 
} 

<Row class="eq-height-cols-wrapper"> 
    <Col class="eq-height-col"> 
    ...

這似乎是現代瀏覽器的非常標準的解決方案（例如：1，2），但它意味着列不以小屏幕寬度疊加。

我該怎麼做才能將未知高度的一列相對於其他未知高度的列垂直居中，以便在較小的屏幕寬度下它會垂直顯示並顯示？

來源

2017-04-13 cfogelberg

使用@media查詢僅適用於較大的屏幕。由於Bootstrap中的md斷點爲992px，因此您可以使用它。 Flexbox是適用於vertical centering的好方法。

@media (min-width: 992px) { 
.eq-height-cols-wrapper: { 
    display: flex; 
} 

.eq-height-col: { 
    margin-top: auto; 
    margin-bottom: auto; 
} 
}

來源

2017-04-13 11:06:21 ZimSystem

如何垂直居中引導列內容塌陷垂直於小屏幕

回答

相關問題