Bootstrap：在列之间添加边距/填充空间
Posted
技术标签:
【中文标题】Bootstrap：在列之间添加边距/填充空间【英文标题】：Bootstrap: add margin/padding space between columns 【发布时间】：2014-05-24 05:55:34 【问题描述】：我正在尝试在我的 Bootstrap 网格布局的列之间放置一些额外的边距/填充空间。我试过this，但我不喜欢这个结果。这是我的代码：
<div class="row">
<div class="text-center col-md-6">
Widget 1
</div>
<div class="text-center col-md-6">
Widget 2
</div>
</div>
我想添加margin: 10px 和padding:10px。有人建议用pull-left和pull-right把自己的类改成col-md-5，但是它们之间的差距会太大。
【问题讨论】：
【参考方案1】：只需在col-md-6 中添加一个具有您需要的额外填充的 div。 col-md-6 是保持列完整性的“主干”，但您可以在其中添加额外的填充。
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">Widget 2</div>
</div>
</div>
CSS
.classWithPad margin:10px; padding:10px;
【讨论】：
太棒了！如今，如果您使用 bootstrap > 3，“classWithPad”类可以只是“mb-3”、“mt-md-4”等，无需额外的 css【参考方案2】：引导程序 5（2021 年更新）
Bootstrap 5 仍然包含用于填充的间距实用程序。但是，由于新的 RTL 支持，“左”和“右”已更改为“开始”和“结束”。例如，pl-2 现在是 ps-2。
pl-* => ps-*（左填充）
pr-* => pe-*（右填充）
ml-* => ms-*（左边距）
mr-* => me-*（右边距）
此外，Bootstrap 5 引入了新的grid gutter classes，可用于调整列间距。排水沟设置在 row 上，而不是行内的每个 col-* 上。例如，使用g-0 表示列之间没有间距。
Bootstrap 5 column spacing demo
引导程序 4（2018 年更新）
Bootstrap 4 有 spacing utilities 可以更轻松地添加（或减去）列之间的空间（装订线）。 不需要额外的 CSS。
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
您可以调整列内容的边距，使用 margin 工具，例如 ml-0 (margin-left:0)、mr-0 (margin-right: 0)、mx-1（0.25rem 左右边距）等...
或者， 您可以使用 padding 实用工具调整列上的填充（col-*），例如如 pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
备注
更改col-* 的左右边距会破坏网格。
更改col-*作品内容的左右边距。
更改col-* 上的左/右填充也可以。
【讨论】：
【参考方案3】：我也面临同样的问题；以下对我来说效果很好。希望这对登陆这里的人有所帮助：
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
这将自动在 2 个 div 之间呈现一些空间。
【讨论】：
是的......但感觉很脏...... 引导文档建议列应该是行的直接子级。 工作正常，但在这种情况下，没有办法调整这个差距。 老实说更喜欢这个答案，因为它不需要任何自定义 css。毕竟，这就是你使用框架的原因。谢谢 这根本不是一个好答案。你不应该在网格中嵌套列。【参考方案4】：只需添加“justify-content-around”类。这将自动在 2 个 div 之间添加间隙。
文档： https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
示例：
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
【讨论】：
太棒了。简单的解决方案。感谢分享 这就是答案。删除上面的。【参考方案5】：您可以按如下方式使用 Bootstrap 4 类的 padding 和 margin 速记：
对于超小型设备，例如 xs
propertysides-size
对于其他设备/视口（小、中、大和特大）
propertysides-breakpoint-size
地点：
property = m for margin and p for padding
以下是边的简写含义：
l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides
断点 = sm、md、lg 和 xl。
综合以上所有，左侧填充完整代码可以是（例如）：
用于超小型设备中的左侧填充
pl-2
或用于中型到超大型
pl-md-2
【讨论】：
【参考方案6】：试试这个：
<div class="row">
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 1
</div>
</div>
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 2
</div>
</div>
</div>
【讨论】：
你的答案与上一个有什么不同？通过使列的内容居中？【参考方案7】：我会在中间保留一个额外的列以用于较大的显示器，并在列在较小的显示器上折叠时重置为默认值。像这样的：
<div class="row">
<div class="text-center col-md-5 col-sm-6">
Widget 1
</div>
<div class="col-md-2">
<!-- Gap between columns -->
</div>
<div class="text-center col-md-5 col-sm-6">
Widget 2
</div>
</div>
【讨论】：
【参考方案8】：使用 flexbox 超级简单。通过将列更改为 col-md-5 为一些空间留出空间
<div class="row widgets">
<div class="text-center col-md-5">
Widget 1
</div>
<div class="text-center col-md-5">
Widget 2
</div>
</div>
CSS
.widgets
display: flex;
justify-content: space-around;
【讨论】：
在 Bootstrap 4 中，您可以在此处使用内置类.justify-content-between 代替 .widgets。【参考方案9】：
当单元格获得背景颜色时，像我这样的人的解决方案
<div class="row">
<div class="col-6 cssBox">
a<br />ba<br />ba<br />b
</div>
<div class="col-6 cssBox">
a<br />b
</div>
</div>
CSS
.cssBox
background-color: red;
margin: 0 10px;
flex-basis: calc(50% - 20px);
【讨论】：
【参考方案10】：另一方面，如果您想删除列之间的双重填充，只需在行内添加类“nogap”
<div class="row nogap">
<div class="text-center col-md-6">Widget 1</div>
<div class="text-center col-md-6">Widget 2</div>
</div>
并为其创建额外的 css 类
.nogap > .col padding-left:7.5px; padding-right: 7.5px
.nogap > .col:first-child padding-left: 15px;
.nogap > .col:last-child padding-right: 15px;
就是这样，检查这里：https://codepen.io/michal-lukasik/pen/xXvoYJ
【讨论】：
【参考方案11】：对于那些希望控制动态列数之间的空间的人，请尝试：
<div class="row no-gutters">
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<!-- etc. -->
</div>
CSS：
.col:not(:last-child) .inner
margin: 2px; // Or whatever you want your spacing to be
【讨论】：
【参考方案12】：我遇到了同样的问题，并通过在 bootstrap col 中嵌套一个 div 并为其添加填充来解决它。比如：
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
</div>
</div>
【讨论】：
【参考方案13】：试试这个：
<div class="row">
<div class="col-md-5">
Set room heater temperature
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
Set room heater temperature
</div>
</div>
【讨论】：
【参考方案14】：为了更好奇，我也发现添加
border: 5px solid white
或您喜欢的任何其他变体，使其融入其中，效果极佳。
【讨论】：
您添加的是白色边框，而不是边距。 我想你必须真正了解盒子模型到底是什么。以上是关于Bootstrap：在列之间添加边距/填充空间的主要内容，如果未能解决你的问题，请参考以下文章
一种使 Bootstrap col-xx 在列之间没有填充的方法[重复]