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屋!