作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我需要对 Json 响应进行格式化,以便每行有三个元素以及需要多少行。
除了懒惰和必须跟踪计数器之外,让一行超过十二列是否有任何负面影响,因为它们会创建一个新行?
即使从 bootstrap 文档来看,这听起来也不是个坏主意
如果超过 12 列放置在一行中,每组额外的列将作为一个单元换行。[ 1 ]
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>A</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>B</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>C</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>D</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>E</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>F</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>G</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/555x300">
<h3>H</h3>
<p><a href="http://example.com">Link to project</a></p>
</div>
</div>
最佳答案
12 列网格本身并没有什么坏处,只是碰巧 Bootstrap 带有一个预建的 12 列网格(任意但合理的默认值)
对于现有元素,潜在的危害是所有其他 UI 元素都期望 12 列网格
就您的特定需求而言,实际上,您可能想要制作一个自定义 UI 元素(即自定义网格/“表格”来显示您的数据),而不是像自定义 BS 网格那样真正进行如此广泛的更改
如果您想要更改网格,您可以尝试从 LESS 源代码重新编译所有 CSS 并更改变量:
@grid-columns: 12;
@grid-gutter-width: 30px;
关于css - 遍历 12 列 : What's the harm?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28783555/
我是一名优秀的程序员,十分优秀!