Bootstrap Gridview对齐混合

问题描述：

基于Bootstarp Gridview，为了正确对齐和显示，列的总和必须等于12。Bootstrap Gridview对齐混合

查看下面的代码，总共是18，但是这显示正确的对齐。

<div class="row"> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

我想有人向我解释这一点。

NB：这对我来说前人的精力被设置为：

<div class="row"> 
    <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-4 col-md-4">.col-xs-6 .col-md-4</div> 
</div>

答

这是一个普遍的误解，认为列必须等于12，这没有什么错用超过12，而实际上引导文档状态：

“如果超过12列被放置在单个行中，各组的额外的列会，作为一个单元，换到一个新行”

文档中还有一些示例说明了为什么需要“列包装”：http://getbootstrap.com/css/#grid-example-wrapping

Read this article。你不想超过12个单位的时候是嵌套列。

我的问题是，为什么在这种情况下，列不会换行到col-xs-6的新行，这会给18？ – Jmocke

最后一个col会在最小（xs）屏幕上换行到新行：http://www.codeply.com/go/TbrKsyphQB – ZimSystem

答

因为你的屏幕大小是不是在XS范围和浏览器渲染“COL-MD-4”

这将包装上的屏幕尺寸小于992px（宽）

答

这是中一种常见的误解新的编码器。总和可以超过12 :)

Bootstrap Gridview对齐混合

相关推荐