我已经在这段代码中工作了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>
答案 0 :(得分:1)
要处理网格元素之间的间距,请设置偏移量。
整个文档在这里:Bootstrap Grid Documentation(“偏移列”部分)
就像Shireesha回答了您一样,您的div上可能会需要一些东西:
.col-md-offset-*
其中*是您需要的空间量。
答案 1 :(得分:0)
尝试一下可能对您有帮助
<div class="col-12 mb-3 mb-sm-0"></div>