gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 08:20:34 24 4
gpt4 key购买 nike

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

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

关于css - 遍历 12 列 : What's the harm?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28783555/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com