Question

经过几年的最小编码后，我建立了我的第一个Bootstrap网站。只是熟悉媒体查询，我已经搜索了很多，但无法找到解决此问题的方法......

我试图创建一个双列部分，其中一侧是响应式图像，另一侧是文本段落。我试图使文本垂直对齐图像，对于大于中等大小的图像。但是我希望它可以折叠成一个小列和xs大小的列。但我需要为每个布局设置不同的边距。这是该部分的代码和一个嵌套行...

<div id="bio">
<div class="container">
<div class="row display-table">

   <div class="text-left col-md-6 display-cell">
     <p>Text...</p>
   </div>

   <div class="col-md-6 display-cell">
     <img class="img-responsive img-rounded"  src="images/forest-park.jpg" width="100%" height="100%" alt=""/>       
   </div>

</div>
</div>
</div>

用这个CSS ...

@media screen (min-width: @screen-md-min) {

    .display-table {
        display: table;
        table-layout: fixed;
    }

    .display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
        margin-bottom: 60px;
    }

}

如果没有媒体查询，这适用于较大尺寸的垂直对齐文本。使用媒体查询时，它全部折叠正常，但底部边距消失，段落不再垂直对齐。

有什么想法吗？

Bootstrap：媒体查询的垂直对齐和边距问题

0 个答案: