我试图在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.有些人建议把他们的班级改为col-md-5班，pull-left班和pull-right班，但是他们之间的差距太大了.
Bootstrap 5(2021年更新)
bootstrap 5仍然包括用于填充的间隔实用程序.然而，由于新的RTL支持，"Left"和"Right"已更改为"Start"和"End".例如，pl-2现在是ps-2.
pl-*=>；ps-*(左填充)pr-*=>；pe-*(右侧填充)ml-*=>；ms-*(左边距)mr-*=>；me-*(右边距)此外，Bootstrap5引入了新的grid gutter classes，可用于调整列之间的间距.檐槽设置在row上，而不是设置在行内的每个col-*上.例如，使用g-0表示列之间没有间距.
Bootstrap 5 column spacing demo个
Bootstrap 4(2018年更新)
bootstrap 带4具有spacing utilities，这使得添加(或减go )列之间的空间(间距)更容易.Extra CSS isn't necessary.
<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个实用程序进行adjust margins on the column contents操作，例如ml-0(左边距:0)、mr-0(右边距:0)、mx-1(0.25雷姆左右边距)等.
100您可以使用padding个UTIL(例如pl-0(左填充:0)、pr-0(右填充:0)、px-2(.50rem左和右填充)等adjust padding on the columns(列-*)...
Bootstrap 4 Column Spacing Demo个
Notes个
col-*的左/右边距将中断网格.col-*个作品内容的左/右页边距.col-*上的左/右填充也可以.