容器不会散开物品答案

【问题标题】：Container won't spread out out items容器不会散开物品
【发布时间】：2021-07-30 02:35:41
【问题描述】：

我的卡在容器中出现问题。它们不会散布到标题的 100% 宽度，因此它们是均匀的。这是一个天气仪表板应用程序，我希望包含 5 张卡片的容器与标题的宽度相同，并在移动设备上进行换行。任何帮助表示赞赏。下面是我的 HTML 和 CSS：

这里是 HTML。我在容器 div 中总共有 5 张卡片。

<body>
    <header>
      <h1> Weather Dashboard </h1>
      <p id="currentDay"> </p>
      <input type="text" class="searchBox" placeholder="City Search">
      <!-- Hidden Recent Searches Bar with Bootstrap -->
      <ul class="list-group list-group-horizontal-sm" hidden>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
      </ul>
      <div class="btnContainer">
          <button class= "goBtn"> Go</button>
      </div>
    </header>
    <!-- Cards for weather forecast with Bootstrap -->
    <div class = "container">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title"></h5>
          <h6 class="card-subtitle mb-2 text-muted"></h6>
          <p class="card-text"></p>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title"></h5>
          <h6 class="card-subtitle mb-2 text-muted"></h6>
          <p class="card-text"></p>
        </div>
      </div>

header {
    background: rgb(255,255,255, 0.35);
    border-radius: 1rem;
    margin-bottom: 10px;
    padding: 10px 10px 10px 10px;
    width: 90%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 90%;
}
.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
}

.card {
    background: rgb(255,255,255, 0.75);
    font-family: all-round-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    border-radius: 1rem;
    margin: 25px 25px 25px 25px;
}

谢谢！

【问题讨论】：

您在 HTML 中将每张卡片的宽度设置为 18em。
我试着把它取下来，它也没有做任何事情

标签： html css flexbox bootstrap-5

【解决方案1】：

您可以使用 CSS Bootstrap 来均匀地分隔元素。由于 Bootstrap 使用 12 列，因此您可以在每侧有 1 列边距，并让每张卡片占据 2 列：

<div class = "container">
        <div class = "row">
            <div class = "col-2 offset-1 mt-5 text-center">
                <div class="card">
                    <div class="card-body">
                      <h5 class="card-title"></h5>
                      <h6 class="card-subtitle mb-2 text-muted"></h6>
                      <p class="card-text"></p>
                    </div>
                  </div>
            </div>
            <div class = "col-2 mt-5 text-center">
                <div class="card">
                    <div class="card-body">
                      <h5 class="card-title"></h5>
                      <h6 class="card-subtitle mb-2 text-muted"></h6>
                      <p class="card-text"></p>
                    </div>
                  </div>
            </div>
            <div class = "col-2 mt-5 text-center">
                <div class="card">
                    <div class="card-body">
                      <h5 class="card-title"></h5>
                      <h6 class="card-subtitle mb-2 text-muted"></h6>
                      <p class="card-text"></p>
                    </div>
                  </div>
            </div>
            <div class = "col-2 mt-5 text-center">
                <div class="card">
                    <div class="card-body">
                      <h5 class="card-title"></h5>
                      <h6 class="card-subtitle mb-2 text-muted"></h6>
                      <p class="card-text"></p>
                    </div>
                  </div>
            </div>
            <div class = "col-2 mt-5 text-center">
                <div class="card">
                    <div class="card-body">
                      <h5 class="card-title"></h5>
                      <h6 class="card-subtitle mb-2 text-muted"></h6>
                      <p class="card-text"></p>
                    </div>
                  </div>
            </div>
        </div>
    </div>

但是，您还需要注释掉您的 .container{} CSS，因为它会干扰 Bootstrap。

最终结果将如下所示：

底部的 5 个空白框是你的卡片。

【讨论】：

谢谢！新手引导，但我有点记得这个概念，但不知道该怎么做。非常感谢
没问题 :D 乐于助人
您也可以使用.col 类来使所有列等间距，而无需指定确切的宽度。
如何设置为等间距？
实际上，我不是 100% 确定。我以为我知道 Quasipickle 的意思，但我试过了，但没有用。但是，我确实记得有一种方法可以将元素与网格系统平等地隔开