使用bootstrap 4关闭两个div之间的间隙

Question

<div class="row">
  <div class="input-group col-md-6">
    <div class="form-group ">
      <asp:Label runat="server" ID="Label1" ClientIDMode="Static" Style="margin-left:15px" Text="GL Code" Font-Size="20px" Class="text-bold lblcaption"></asp:Label>
      <asp:TextBox runat="server" Style="margin-left:15px" ID="DrpIncomeCode" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" id="btnincode" style="font-size:20px; width:70px; height:36px" runat="server" clientidmode="Static">Search</button>
      </div>
    </div>
  </div>
  <div class=" col-md-6">
    <div class="form-group">
      <asp:Label runat="server" ID="Label2" ClientIDMode="Static" Text="GL Description" Font-Size="20px" Class="text-bold lblcaption"></asp:Label>
      <asp:TextBox runat="server" ID="txtIncomeDesc" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
    </div>
  </div>
</div>

查看图片

我希望缩小差距。

Answer 1

要删除列之间的填充，可以在.no-gutters div上使用.row类：https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

如果要将项目保留在网格系统中，还应该考虑在第一列中使用padding-left而不是margin-left。

.row .form-group:first-child {
  padding-left: 15px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row no-gutters">
  <div class="form-group col-6">
    <label class="font-weight-bold">GL Code</label>
    <div class="input-group">
      <input class="form-control" />
      <button class="btn btn-outline-secondary">Search</button>
    </div>
  </div>
  <div class="form-group col-6">
    <label class="font-weight-bold">GL Description</label>
    <input class="form-control">
  </div>
</div>

---

我希望这会有所帮助。