如何在回显四个项目后创建一个新列？

Question

所以，我正在为我的虚拟在线游戏开店，我希望每一行都有四个项目。 这些项目是从数据库中提取的。 我正在使用bulma作为css框架。 我基本上希望行有点像这样： http ： //bloxtopia.xyz/Shop/ < - （项目所在的位置）

这是前端的外观

  <div class="column"> item 1 </div><div class="column"> item 2 </div><div class="column"> item 3 </div><div class="column"> item 4 </div></div> <div class='columns'><div class="column"> item 5 on new line because of (<div class='columns'><div class="column">) </div> 

所以基本上，每回动四个项目后，就会添加<div class='columns'>

Answer 1

你可以使用它，它会自动连续返回4列。

 * { box-sizing: border-box; } /* Create four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; height: 300px; /* Should be removed. Only for demonstration */ margin-bottom: 5px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } 

 <h2>Four Equal Columns</h2> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <p>Some text..</p> </div> </div> 

Answer 2

是否有特定需要创建新的列组？ Bulma允许多行列容器。 https://bulma.io/documentation/columns/options/

正如@Christhofer Natalius所提到的，在列上使用.is .is-one-quarter ，但不要忘记main .columns容器上的.columns .is-multiline ！

此方法允许您不关心返回多少项，它们将相应地换行，而不需要为每4个项目创建一个新的列包装器。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/> <div class="columns is-multiline is-mobile"> <div class="column is-one-quarter">item 1</div> <div class="column is-one-quarter">item 2</div> <div class="column is-one-quarter">item 3</div> <div class="column is-one-quarter">item 4</div> <div class="column is-one-quarter">item 5</div> <div class="column is-one-quarter">item 6</div> <div class="column is-one-quarter">item 7</div> <div class="column is-one-quarter">item 8</div> </div>