一旦进入嵌套行,Bootstrap 似乎会破坏自己的网格。这是一个很好的例子:
div {
border: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-5">nested col-xs-5</div>
<div class="col-xs-7">nested col-xs-7</div>
</div>
</div>
<div class="col-xs-1">col</div>
</div>
</div>
我希望能够使“嵌套 xs-col-*”列与顶部的 12 列完全对齐。如果我创建内部类 col-xs-3/col-xs-7(像包含的 col 一样加起来最多 10 个),它也不起作用。这只是在右边留下了一个缺口。
如果您使用奇数宽度,一旦进入嵌套行,Bootstrap 实际上不会让您尊重网格,这样说是否正确?还是我做错了?
在我看来,网格的全部意义在于事物应该对齐。如果我想要完美对齐,是否必须远离(重要的)嵌套行?
最佳答案
1) 选择比例
嵌套行也使用 12 列网格。因此,您要求 Bootstrap 从 10 个父列
中获取 5/12
。但这是一个小数。由于此列边界彼此不重合。
选择列之间的比例。例如:
4/12
来自9 个父列
正好是3 个父列
3/12
来自8 个父列
恰好是2 个父列
div {
outline: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-1">col</div>
<div class="col-xs-1">col</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-3">nested 4</div>
<div class="col-xs-9">nested 8</div>
</div>
</div>
<div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-1">col</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-4">nested 3</div>
<div class="col-xs-8">nested 9</div>
</div>
</div>
<div class="col-xs-1">col</div>
</div>
</div>
2) 简化布局
您可以在没有嵌套列的情况下执行相同的操作:
div {
outline: 1px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-3">3 columns</div>
<div class="col-xs-7">7 columns</div>
<div class="col-xs-1">col</div>
</div>
<div class="row">
<div class="col-xs-1">col</div>
<div class="col-xs-4">4 columns</div>
<div class="col-xs-6">6 columns</div>
<div class="col-xs-1">col</div>
</div>
</div>
关于css - Bootstrap 3 中的嵌套行不符合网格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39060539/