如何使内容显示在三列而不是一列？

Question

我是一名初学者，正在学习使用 API 的教程。我想改变设计的布局，而不是一列，我想要一个三列布局。我不知道我是否正确使用了 flexbox。

我尝试过使用行然后有三列，但不知何故无法正确显示。我也在使用引导程序。

Answer 1

您正在寻找的是CSS Grid，它可以让您在行和列中显示元素。

只需将您的 flexbox 更改为具有 3 个相等列的网格：

/* display: flex; */
display: grid;
grid-template-columns: repeat(3, 1fr);

Answer 2

首先，我们需要清理您的 HTML 结构。

因为在您的 javascript 中，您将所有卡片附加到“images-container”类中，我们必须删除重复的 div。

<div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        <div class="images-container"></div>
      </div>
      <div class="col-md-4">
        <div class="images-container"></div>
      </div>
      <div class="col-md-4">
        <div class="images-container"></div>
      </div>
    </div>
  </div>

把它们变成了。所以它只会附加到一个容器中并在那里做我们的弹性。

  <div class="container-fluid">
    <div class="row">
      <div class="images-container"></div>
    </div>
  </div>

下一个是CSS， 我在“images-container”上添加了一个“flex-wrap: wrap”，这样只要没有剩余空间，卡片就会进入下一行。

/* Images Container */
.images-container {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

并且由于您遵循引导类名称，因此您必须在带有断点的类名称上添加媒体查询。它说该卡将在 xs“最小屏幕”上占用 12 列，在中等屏幕上占用 4 列。

.col-xs-12 { 
  width: 100%;
}

@media onyl screen and (min-width: 767px) {
  .col-md-4 {
    width: 33% !important;
  }
}

现在在 javascript 上。 因为我们将卡片放在“图像容器”中。然后我们需要直接在卡上添加类名“col-md-4”和“col-xs-12”，这样它就有自己的宽度

    // Card Container
    const card = document.createElement("div");
    card.classList.add("card");
    card.classList.add("col-md-4");
    card.classList.add("col-xs-12");

抱歉，解释太长了，我还在提高我的解释技巧，希望对你有所帮助。