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列。

:help terminal-debug

* {
  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;
}

Answer 2

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

就像@Christhofer Natalius提到的那样，在列上使用.is-one-quarter，但不要忘记在主.is-multiline容器上的.columns！

此方法使您不必担心返回了多少项目，它们将相应地包装而无需为每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>

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

2 个答案: