我正在尝试在我的 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，但是它们之间的差距会太大。
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-5
只需在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; }
【讨论】：
引导程序 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-* 上的左/右填充也可以。【讨论】：
【讨论】：
只需添加“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>
【讨论】：
您可以按如下方式使用 Bootstrap 4 类的 padding 和 margin 速记：
对于超小型设备，例如 xs
{property}{sides}-{size}
对于其他设备/视口（小、中、大和特大）
{property}{sides}-{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
【讨论】：
试试这个：
<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>
【讨论】：
我会在中间保留一个额外的列以用于较大的显示器，并在列在较小的显示器上折叠时重置为默认值。像这样的：
<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>
【讨论】：
使用 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;
}
【讨论】：
.justify-content-between 代替 .widgets。
当单元格获得背景颜色时，像我这样的人的解决方案
HTML
<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);
}
【讨论】：
另一方面，如果您想删除列之间的双重填充，只需在行内添加类“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; }
【讨论】：
对于那些希望控制动态列数之间的空间的人，请尝试：
<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
}
【讨论】：
我遇到了同样的问题，并通过在 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>
【讨论】：
试试这个：
<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>
【讨论】：
为了更好奇，我也发现添加
border: 5px solid white
或您喜欢的任何其他变体，使其融入其中，效果极佳。
【讨论】：