Bootstrap通过移动优化垂直对齐列内容 [英] Bootstrap Vertically Align Column Content with Mobile Optimization

问题描述

我正在使用最新的Bootstrap网格系统开发移动优化的网站。我想在md和lg中彼此相邻，但在xs和sm中垂直堆叠。为了正确的布局，我也使用浮动左和右，如果顺序需要不同时堆叠。

这里是我的css除了bootstrap：

  .left {
 float：left; 
} 
 .right {
 float：right; 
} 
 @media（min-width：992px）{
 .vertical-container-md {
 position：relative; 
} 
 .vertical-center-md {
 position：absolute; 
 top：50％; 
 transform：translateY（-50％）; 
} 
 .right.vertical-center-md {
 left：50％; 
} 
} 
  

这是我的html：

 < section class =container> 
< div class =row vertical-container-md> 
< div class =col-xs-12 col-sm-12 col-md-6 left vertical-center-md> 
< h1>小内容< / h1> 
< p> 1234567890< / p> 
< / div> 
 
< div class =col-xs-12 col-sm-12 col-md-6 right> 
< h1>许多内容< / h1> 
< p> abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz< / p> 
< h2>副标题< / h2> 
< input type =submitvalue =Button/> 
< / div> 
< / div> 
< / section> 
  

如果标记为vertical-center-md的列总是最小的，然而，我有一些情况下，一列有一个响应的图像，可以更大或更小。所以要解决，我只是添加vertical-center-md到两列。应该工作正常吗？

当两个列使用垂直居中的实现时，行div将丢失其自动高度，并且列div将转换为行上方50％。

问题：如何使用引导网格系统实现响应列内容的垂直居中？

解决方案

感谢来自 vertical-align with bootstrap 3 的zessx。我很高兴在使用纯CSS时摆脱浮动，定位和转换。

  .border {
 border：1px solid black; 
} 
 .vertical-middle {
 display：inline-block; 
 vertical-align：middle; 
 float：none; 
} 
  

请记住在内联块元素之间注释空格！

 < section class =container> 
< div class =row> 
< div class =col-xs-12 col-sm-12 col-md-6 col-md-push-6 border vertical-middle> 
< h1>小内容< / h1> 
< p> 1234567890 1234567890 1234567890< / p> 
< / div><！ -  
 
  - >< div class =col-xs-12 col-sm-12 col-md-6 col-md -pull-6 border vertical-middle> 
< h1>许多内容< / h1> 
< p> abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz< / p> 
< h2>副标题< / h2> 
< input type =submitvalue =Button/> 
< / div> 
< / div> 
< / section> 
  

似乎每个人都对Boostrap网格系统抱有同样的抱怨，希望他们能在v4中修复。 / p>

I am working on a mobile optimized website using the latest Bootstrap grid system. I want two columns next to each other in md and lg but stacked vertically in xs and sm. For proper layout, I also use float left and right if the order needs to be different when stacked. Finally, I want to vertically center the content within each column.

Here is my css in addition to bootstrap:

.left {
    float: left;
}
.right {
    float: right;
}
@media (min-width: 992px) {
    .vertical-container-md {
        position: relative;
    }
    .vertical-center-md {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .right.vertical-center-md {
        left: 50%;
    }
}

Here is my html:

<section class="container">
    <div class="row vertical-container-md">
        <div class="col-xs-12 col-sm-12 col-md-6 left vertical-center-md">
            <h1>Little Content</h1>
            <p>1234567890</p>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 right">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

If the column tagged as vertical-center-md is always the smallest, this works great. However, I have some cases where one column has a responsive image which can be larger or smaller. So to fix that I just add vertical-center-md to both columns. Should work right? Nope.

When both columns use this implementation of vertical centering, the row div loses its auto-height and the column divs are transformed to 50% above the row.

Question: How can I implement vertical centering of responsive column content using the bootstrap grid system?

解决方案

Thank you zessx from vertical-align with bootstrap 3. I'm glad to get away from floating, positioning, and transforming while sticking with pure CSS.

.border {
    border: 1px solid black;
}
.vertical-middle {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Remember to comment whitespace between inline-block elements!

<section class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-md-push-6 border vertical-middle">
            <h1>Little Content</h1>
            <p>1234567890 1234567890 1234567890</p>
        </div><!--

     --><div class="col-xs-12 col-sm-12 col-md-6 col-md-pull-6 border vertical-middle">
            <h1>Lots of Content</h1>
            <p>abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz</p>
            <h2>Sub Title</h2>
            <input type="submit" value="Button" />
        </div>
    </div>
</section>

Seems like everyone has the same complaint about the Boostrap grid system, hopefully they fix it in v4.

这篇关于Bootstrap通过移动优化垂直对齐列内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！