如何垂直居中引导列内容塌陷垂直于小屏幕

我使用的引导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

如何垂直居中引导列内容塌陷垂直于小屏幕

回答

相关问题