Question

尝试使用bootstrap嵌套网格并且失败：最后一个单元格中断到新行：

以下是代码，但您应该在brawser上运行它：不要使用任何在线编辑器。

一些漂亮颜色的CSS：

.green {
    background-color: lightgreen;
}
.blue {
    background-color: lightblue;
}
.yellow {
    background-color: yellow;
}
.grey {
    background-color: lightgrey;
}

这是代码，两个成功的例子和网格的左肩失败：

<div class="container">
<hr>
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-2 blue">2</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
<hr>
<div class="row">
    <div class="col-md-3 grey">
        <div class="row">
            <div class="col-md-4 green">4</div>
            <div class="col-md-1 blue">1</div>
            <div class="col-md-4 yellow">4</div>
            <div class="col-md-3 blue">3</div>    
        </div> 
    </div>
    <div class="col-md-9 blue">9</div>
</div>
</div>

在Chrome上我有令人心碎的结果：

我甚至在计算器上检查4 + 1 + 4 + 3但是钢铁是12 ......

Answer 1

这不是一个错误，这只是将网格系统推得太远的情况。 .col-md-1中的.col-md-3可以归结为默认容器宽度的1/3 * 1/12的列宽，即970px。所以970/3/12 = ~27px是你试图强制该列的宽度。但是列的每一侧的默认填充是15px，使得列的最小宽度没有任何内容 30px。这就是为什么这种布局打破了网格的原因。您可以通过将.container切换为.container-fluid并使浏览器窗口足够宽来验证这一点 - 最终.col-md-1列会超出它的填充范围并滑入到位。

解决方案是分别减少.col-*和.row的填充和负边距 - 它们需要相互补充。像这样：

.row {
  margin-right: -10px !important;
  margin-left: -10px !important;
}

[class*="col-md-"] {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

请参阅https://jsfiddle.net/ovj1csv6/

但是你最好不要首先以这种方式使用网格系统。

Answer 2

正如我们可以在上面的图像中每次col- *之后都会有填充。您可以通过添加[class*="col-"] { padding: 0 !important; }

来删除它

并且您的细胞将适应该col-3细胞。

参考了这个link

上面的bootply

Bootstrap嵌套网格不成比例

2 个答案: