如何在不换行的情况下在引导列之间添加边距 [英] How do I add a margin between bootstrap columns without wrapping

查看：21
本文介绍了如何在不换行的情况下在引导列之间添加边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<div class="col-md-4 server-action-menu" id="server_1"><div>服务器 1

<div class="col-md-4 server-action-menu" id="server_2"><div>服务器 2

<div class="col-md-4 server-action-menu" id="server_3"><div>服务器 3

<div class="col-md-4 server-action-menu" id="server_4"><div>服务器 4

<div class="col-md-4 server-action-menu" id="server_5"><div>服务器 5

<div class="col-md-4 server-action-menu" id="server_6"><div>服务器 6

<div class="col-md-4 server-action-menu" id="server_7"><div>服务器 7

和 CSS 

.server-action-menu {背景色:透明；背景图像:线性渐变(到底部，rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%)；背景重复:重复；边框半径:10px；}.信息面板{填充:4px；}

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

.info-panel >div {边距:4px；}

如何为 DIV 添加边距，以便它们不会在右侧留下太多空间?

解决方案

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

HTML 

<div class="col-md-4" id="server_1"><div class="server-action-menu">服务器 1

CSS

.server-action-menu {背景色:透明；背景图像:线性渐变(到底部，rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%)；背景重复:重复；边框半径:10px；填充:5px；}

My layout currently looks like this

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>

And the 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;    
}

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

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆