Html 如何在侧面容器中的元素之间添加边距而不推到下一行

我有3件东西被包装在一个容器里。我给它们添加了背景色和填充物

现在，当我想在它们之间添加一些边距时，它将转移到下一行

.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
  //margin-right: 10px; Shifts line to next row.
}

@导入url（'https://fonts.googleapis.com/css?family=Baloo+Bhaina’）；
/*全局样式
-------------------------------------------------- */
/*页脚下方的填充和较轻的正文文本*/
身体{
垫面：3rem；
垫底：3rem；
颜色：#231123；
背景色：#F4E04D；
}
/*营销内容
-------------------------------------------------- */
/*将旋转木马下方三列内的文本居中对齐*/
.市场营销。col-lg-4{
保证金底部：1.5雷姆；
文本对齐：居中；
}
.市场推广h2{
字体大小：400；
}
.市场营销。col-lg-4 p{
保证金权利：.75rem；
左边缘：.75rem；
}
.分区类别{
背景色：#2274A5；
左侧填充：50px；
右边填充：50px；
填充顶部：50px；
填充底部：100px；
边界半径：3px；
盒影：0 1px4p0 rgba（0,0,0,0.14）；
颜色：白烟；
}

文本1
第1段


文本2
第2段


文本3
第3段

然后在内部再添加一个div，并对其应用边距。在边距类内部

<div class="col-lg-4 col-md-4 col-sm-4 div-category">
<div class="inside-margin">

</div>
</div>

.inside-margin{ margin:0 5px; }

.内页边距{页边距：0 5px；}

这是因为您使用了12列网格，然后您试图应用边距，并且由于屏幕的整个空间已被12列使用，因此缺少空间并换行

---

您可以将col-lg-4更改为col-lg-3，然后尝试提供边距。

您需要稍微更改一下结构，这里有更新

应该行得通

@导入url（'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');
/*全局样式
-------------------------------------------------- */
/*页脚下方的填充和较轻的正文文本*/
身体{
垫面：3rem；
垫底：3rem；
颜色：#231123；
背景色：#F4E04D；
}
/*营销内容
-------------------------------------------------- */
/*将旋转木马下方三列内的文本居中对齐*/
.市场营销。col-lg-4{
保证金底部：1.5雷姆；
文本对齐：居中；
}
.市场推广h2{
字体大小：400；
}
.市场营销。col-lg-4 p{
保证金权利：.75rem；
左边缘：.75rem；
}
.分区类别{
背景色：#2274A5；
左侧填充：50px；
右边填充：50px；
填充顶部：50px；
填充底部：100px；
边界半径：3px；
盒影：0 1px4p0 rgba（0,0,0,0.14）；
颜色：白烟；
}
.col-lg-4.分区类别{
利润率：0.20px；
}

文本1
第1段


文本2
第2段


文本3
第3段

您想在同一行中放置3个div吗？是@charankumar，添加后需要在同一行中放置它们margin@Simsons你想要右边的边距还是底部的边距？我想要右边的边距..你看过（引导内置间距）还是（在引导中向列添加边距）？这仍然会将边距移到下一行。请看一看JSFIDLE或snipper。您正在中型设备中查看，您需要添加额外的col-md-4和col-sm-4以及col-lg-4，我已经编辑了我的代码，这不是解决方案。它会把容器挤得太窄。@Simons你可以做一件事。将每个块的内容包装在另一个div中，并对该div应用填充。这将在每个块项目之间添加空格。并对该div应用背景色only@Simsons看看这把小提琴，告诉我它是否适合你。

<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  

.col-lg-4 .div-category{
  margin: 0 20px;
}