css Bootstrap中的厨房Flume卡未对齐

nbysray5  于 2023-04-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(143)

嗨,我的Bootstrap KitchenFlume卡没有正确对齐(水平)。
我尝试了CSS和Bootstrap(HTML)中的一些代码。
CSS代码:

display:flex;
justify-content:center;

引导代码。

d-flex justify-content-center

这是webapp

的图片
我期望卡片能正确地水平对齐,但我没有这样做。

eiee3dmh

eiee3dmh1#

以下是如何修改CSS代码的示例:

.card {
  height: 300px; /* set a fixed height for all cards */
  margin: 10px; /* add some margin to separate the cards */
}

.card-deck {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* make all cards the same height */
  justify-content: center;
}

下面是一个如何修改Bootstrap代码的例子:

<div class="card-deck justify-content-center">
  <div class="card">
    <!-- card content goes here -->
  </div>
  <div class="card">
    <!-- card content goes here -->
  </div>
  <!-- add more cards as needed -->
</div>

请记住将<!-- card content goes here -->占位符替换为您的实际卡片内容。
我希望这能帮助您正确对齐Bootstrap KitchenFlume卡!

相关问题