html – 如何在bootstrap列之间添加边距而不包装

概述参见英文答案 > How do I add spacing between columns in Bootstrap?                                    25个 我的布局目前看起来像这样 在中间列中,我想在每个Server Div之间添加一个小的边距.但是,如果我在CSS中添加一个边距,它最终会换行并看起来像这样 <div class="row info-pan 参见英文答案 > How do I add spacing between columns in Bootstrap?                                    25个
我的布局目前看起来像这样

在中间列中,我想在每个Server div之间添加一个小的边距.但是,如果我在CSS中添加一个边距,它最终会换行并看起来像这样

<div >    <div  ID="server_1">        <div>            Server 1        </div>    </div>    <div  ID="server_2">        <div>            Server 2        </div>    </div>    <div  ID="server_3">        <div>            Server 3        </div>    </div>    <div  ID="server_4">        <div>            Server 4        </div>    </div>    <div  ID="server_5">        <div>            Server 5        </div>    </div>    <div  ID="server_6">        <div>            Server 6        </div>    </div>    <div  ID="server_7">        <div>            Server 7        </div>    </div></div>

和CSS

.server-action-menu {    background-color: transparent;    background-image: linear-gradIEnt(to bottom,rgba(30,87,153,0.2) 0%,rgba(125,185,232,0) 100%);    background-repeat: repeat;    border-radius:10px;}.info-panel {    padding: 4px;}

我试图通过这样做来添加边距

.info-panel  > div {    margin: 4px;    }

如何在div上添加边距,以便它们不会在右侧留下太多空间？

解决方法 您应该在内部容器上使用填充而不是边距.试试这个！

HTML

<div >    <div  ID="server_1">       <div >           Server 1       </div>   </div></div>

CSS

.server-action-menu {    background-color: transparent;    background-image: linear-gradIEnt(to bottom,0) 100%);    background-repeat: repeat;    border-radius:10px;    padding: 5px;}

总结

以上是内存溢出为你收集整理的html – 如何在bootstrap列之间添加边距而不包装全部内容，希望文章能够帮你解决html – 如何在bootstrap列之间添加边距而不包装所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。