我已经在这段代码上工作了 3 天，现在试图弄清楚我做错了什么，但我刚刚放弃了。目前我正在尝试在我的图像之间添加一个间隔符，除了中心图标只有当浏览器或手机设置为 sm 或以下时。我试过 @media 来检查宽度，我也试过 bootstrap mt-md-2 但它仍然什么也没做。这是我的代码，我希望我能找出我遗漏的东西。
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-xs-3 margin-3">
<div class="atomix">
<img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
</div>
<div class="col-lg-12 col-xs-3">
<div class="Rectangle playersOnline mx-auto d-block">
<p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-xs-3">
<div class="navBar1">
<img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
</div>
</div>
<div class="row margin-4">
<div class="col-lg-5 col-xs-3 mt-md-2">
<div class="webStore mt-md-2">
<a href="https://atomixnetwork.buycraft.net/"><img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-2 col-xs-3 margin-15">
<div class="forums">
<a href="https://www.atomixprisonmc.net/"><img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-5 col-xs-3 mt-md-3">
<div class="discord mt-md-3">
<a href="https://discord.gg/D63c9JM"><img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js\bootstrap.min.js">
</script>
最佳答案
要处理网格元素之间的间距，您需要使用偏移量。
整个文档在这里:Bootstrap Grid Documentation (“偏移列”部分)
就像 Shireesha 回答你的那样，你可能需要在你的 div 上添加一些东西，比如:
.col-md-offset-*
其中 * 是您需要的空间量。
关于html - 响应间距的 Bootstrap 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52903152/