gpt4 book ai didi

html - Bootstrap : Gap between columns on mobile display

转载 作者:太空狗 更新时间:2023-10-29 15:28:10 25 4
gpt4 key购买 nike

我正在使用 bootstrap 3.0 做一个网站,我希望 HTML 和 CSS 可以在台式机、平板电脑和移动设备上整齐地显示。

我遇到的一个问题是,当您在移动显示器上查看网站时,列是堆叠的(我不是在批评它,因为这会尽可能地停止滚动)。但是,我希望列之间有一点间隙(甚至 1-2px)。

到目前为止的代码

<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns">
..content
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
..content
</div>
</div>
</div>

一个图像来显示它正在做什么并显示堆栈列

enter image description here

如何在列之间实现一点间隙?

谢谢

最佳答案

添加自定义类 .column-margin 以设置行/列之间的边距。

@media (max-width: 991px) {
.column-margin {
margin: 2px 0;
}
}
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns column-margin">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>

Codeply

关于html - Bootstrap : Gap between columns on mobile display,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30423892/

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