响应间隔的引导问题
响应间隔的引导问题
提问于 2018-10-20 14:47:07
我已经在这段代码上工作了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>回答 2
Stack Overflow用户
发布于 2018-10-20 17:21:48
要处理网格元素之间的间距，可以使用offset。
完整的文档在这里：Bootstrap Grid Documentation (“偏移列”一节)
就像Shireesha回答你的那样，你的div上可能需要一些东西，比如：
.col-md-offset-*其中*是所需的空间量。
Stack Overflow用户
发布于 2018-10-20 17:35:51
试试这个，这可能会对你有帮助
<div class="col-12 mb-3 mb-sm-0"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52903152
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号