如何在回顯四個項目后創建一個新列？

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>