css - 遍历 12 列 : What's the harm?

Question

所以我需要对 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>
  

Answer 1

12 列网格本身并没有什么坏处，只是碰巧 Bootstrap 带有一个预建的 12 列网格(任意但合理的默认值)

对于现有元素，潜在的危害是所有其他 UI 元素都期望 12 列网格

就您的特定需求而言，实际上，您可能想要制作一个自定义 UI 元素(即自定义网格/“表格”来显示您的数据)，而不是像自定义 BS 网格那样真正进行如此广泛的更改

如果您想要更改网格，您可以尝试从 LESS 源代码重新编译所有 CSS 并更改变量:

@grid-columns:              12;
@grid-gutter-width:         30px;

或者使用这个定制器:http://getbootstrap.com/customize/#grid-system