Bootstrap4：如何缩小各占6列的元素间间距？

嘿，我来帮你搞定这个问题！你在Ruby项目里用Bootstrap 4做原型，想要缩小两个col-md-6输入字段之间的间距，其实有几个简单又实用的方法：

方法1：用Bootstrap自带的间距类快速调整 #

Bootstrap 4提供了一套内置的spacing类，可以直接用来调整元素的内外边距，不用写额外CSS。你可以给每个col-md-6添加左右padding的类，比如px-2（代表左右padding为0.5rem），或者更小的px-1（0.25rem），根据你的需求调整：

<div class="row">
  <div class="col-md-6 px-2">
    <%= f.label :name_cont, "Name" %>
  </div>
  <div class="col-md-6 px-2">
    <%= f.label :apointment_cont, "Apointment" %>
  </div>
</div>
<div class="row">
  <div class="col-md-6 px-2">
    <%= f.text_field :name_cont %>
  </div>
  <div class="col-md-6 px-2">
    <%= f.text_field :apointment_cont %>
  </div>
</div>

这里的px-*系列类：px-0是无padding，px-1到px-5对应不同的padding大小，你可以按需选择。

方法2：移除默认gutter后自定义padding #

Bootstrap的row默认带有负margin，col默认左右padding为15px，这构成了列之间的默认间距。你可以给row添加no-gutters类移除默认的gutter，然后给col设置自定义的padding：

<div class="row no-gutters">
  <div class="col-md-6 px-3">
    <%= f.label :name_cont, "Name" %>
  </div>
  <div class="col-md-6 px-3">
    <%= f.label :apointment_cont, "Apointment" %>
  </div>
</div>
<div class="row no-gutters">
  <div class="col-md-6 px-3">
    <%= f.text_field :name_cont %>
  </div>
  <div class="col-md-6 px-3">
    <%= f.text_field :apointment_cont %>
  </div>
</div>

这个方法适合你想要完全控制列间距的场景，调整px-*的值就能精准控制间距大小。

方法3：自定义CSS类（最灵活） #

如果内置类满足不了你的需求，可以写一个自定义CSS类，精准设置间距：

/* 在你的样式文件中添加 */
.small-gap-col {
  padding-right: 8px;
  padding-left: 8px;
}

然后把这个类加到你的col上：

<div class="row">
  <div class="col-md-6 small-gap-col">
    <%= f.label :name_cont, "Name" %>
  </div>
  <div class="col-md-6 small-gap-col">
    <%= f.label :apointment_cont, "Apointment" %>
  </div>
</div>
<div class="row">
  <div class="col-md-6 small-gap-col">
    <%= f.text_field :name_cont %>
  </div>
  <div class="col-md-6 small-gap-col">
    <%= f.text_field :apointment_cont %>
  </div>
</div>

这样你可以随意修改padding-right和padding-left的值，实现完全自定义的间距效果。

内容的提问来源于stack exchange，提问作者user9409047