gpt4 book ai didi

html - 响应间距的 Bootstrap 问题

转载 作者:太空宇宙 更新时间:2023-11-04 06:50:41 24 4
gpt4 key购买 nike

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com