【发布时间】：2020-09-15 20:15:42
【问题描述】：
所以我试图在我的 HTML 中添加 4 个“卡片”（非引导程序），它们之间有空格，这是一张关于它的 应该 外观的图片：
问题就是这样 1. 在我将“col”类更改为“col-6”后，它不再响应，这是它现在的样子： 这是我缩小浏览器时的样子：
每张“卡片”之间的边距是 水平 - 464 像素 垂直 - 100px（从图像到文本）
我之前没有真正使用过引导程序中的网格系统，通读文档并尝试了一堆不同的“col”值，但似乎不起作用。
我还尝试将卡片放在屏幕上，然后在“图像”周围添加一个 div，说“img_div:nth-child(1) ...”，在 3 上也是如此。但这并没有也可以工作！
这是我的 HTML 代码：
<div class="container">
<h1 class="home-title">XelTool</h1>
<div class="row">
<div class="col-6">
<div class="home_card">
<h2 class="card_title">Bazaar Prices</h2>
<div class="img_div">
<img
class="home_img"
src="/static/img/bazaar prices.png"
alt="Bazaar Prices"
/>
</div>
</div>
</div>
<div class="col-6">
<div class="home_card">
<h2 class="card_title">Bazaar Flipper</h2>
<div class="img_div">
<img
class="home_img"
src="/static/img/bazaar prices.png"
alt="Bazaar Flipper"
/>
</div>
</div>
</div>
<div class="col-6">
<div class="home_card">
<h2 class="card_title">Bazaar High Demand</h2>
<div class="img_div">
<img
class="home_img"
src="/static/img/bazaar prices.png"
alt="Bazaar High Demand"
/>
</div>
</div>
</div>
<div class="col-6">
<div class="home_card">
<h2 class="card_title">Bazaar NPC Re-Sell</h2>
<div class="img_div">
<img
class="home_img"
src="/static/img/bazaar prices.png"
alt="Bazaar NPC Re-Sell"
/>
</div>
</div>
</div>
</div>
</div>
谢谢！
【问题讨论】：
-
您查看过文档的 flex 对齐部分吗？
-
不，我去看看！谢谢
-
我确实试过了，但似乎不太明白他们在说什么，我这样做了：pastebin.com/VjVKZ6PE，不太明白我应该在哪里给每个之间的间距项目。
标签： html bootstrap-4