如何在引导列之间添加边距而不包装 [英] How do I add a margin between bootstrap columns without wrapping

问题描述

我的布局目前看起来像这样

My layout currently looks like this

在中心列中，我想在每个 Server Div之间添加一个小边距。但是，如果我为CSS添加边距，它最终会换行，看起来像这样

In the center column, I want to add a small margin between each Server Div. But, if I add a margin to the CSS, it ends up line wrapping and looking like this

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" 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;
}

我尝试通过这样做添加边距

I attempted to add the margins by doing this

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

如何为DIV添加保证金，那么在右手边有很多空间？

How can I add a margin to the DIVs so that they don't leave so much space on the right hand side?

推荐答案

你应该在内部容器上使用padding而不是margin。尝试此操作！

You should work with padding on the inner container rather than with margin. Try this!

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </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;
    padding: 5px;
}

这篇关于如何在引导列之间添加边距而不包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！