Question

我已经在这段代码中工作了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>

Answer 1

要处理网格元素之间的间距，请设置偏移量。

整个文档在这里：Bootstrap Grid Documentation（“偏移列”部分）

就像Shireesha回答了您一样，您的div上可能会需要一些东西：

.col-md-offset-*

其中*是您需要的空间量。

Answer 2

尝试一下可能对您有帮助

<div class="col-12 mb-3 mb-sm-0"></div>

具有响应间隔的自举问题

2 个答案: