Bootstrap - 减少元素之间的间隙，每个元素占用6列

Question

我正在使用ruby开发应用程序。我使用bootstrap4进行原型设计。我有两个输入字段，每个字段占用6列。有没有办法减少两个输入字段之间的空间。

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

Answer 1

在引导程序中使用no-gutters类以避免列中的间距。

https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

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

如果你想用小间距缩小间隙，你可以做一些像下面这样的CSS

.reduce-space {
  padding-right: 1px;
  padding-left: 1px;
}

<div class="row">
  <div class="col-md-6 reduce-space">
    <%= f.label :name_cont, "Name" %>
  </div>
  <div class="col-md-6 reduce-space">
    <%= f.label :apointment_cont, "Apointment" %>
  </div>
</div>
<div class="row">
  <div class="col-md-6 reduce-space">
    <%= f.text_field :name_cont %>
  </div>
  <div class="col-md-6 reduce-space">
    <%= f.date_field(:apointment_cont) %>
  </div>
</div>