Bootstrap v3 网格系统中行内单列的最佳实践? [英] Best practice for single column within row in bootstrap v3 grid system?

问题描述

我在此处阅读了有关网格系统的信息:

I've read about the grid system here: http://getbootstrap.com/css/#grid. While the documentation doesn't directly address a scenario in which there's one column within a row, I do see one example of this here: http://getbootstrap.com/css/#grid-offsetting > third row of the example code.

Currently, I'm applying the class .col-xs-12 to the one column within the containing tags and it is working well across all viewport dimensions. However, I want to ensure there isn't a better way to do this.

Thanks!

解决方案

I think adding a col*-12 will be the best practice. It will make all rows in your grid act the same.

Example:

html

<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
            </div>
</div>                      
<div class="container">
            <div class="row" style="background-color:yellow;">
                direct inside a row
            </div>
</div>      
<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
                <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
            </div>
</div>

As you see the content is NOT in line with the other rows when you don't add a col-*-12 (due to the missing padding). All the rows the same will make future changes easier.

You will have to notice the col*-12 columns differs from the other col-- cause the don't have a float left, see: https://github.com/twbs/bootstrap/issues/10152

这篇关于Bootstrap v3 网格系统中行内单列的最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！