使用引导程序 4 缩小两个 div 之间的差距答案

【问题标题】：Close Gap between two divs using bootstrap 4使用引导程序 4 缩小两个 div 之间的差距
【发布时间】：2018-10-26 18:23:37
【问题描述】：

<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>

看图

我想关闭 Gap。

【问题讨论】：

您的代码没有说明问题。
可能也值得添加标签 ASP.NET

标签： html css bootstrap-4

【解决方案1】：

要删除列之间的填充，您可以在 .row div 上使用 .no-gutters 类：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>

我希望这会有所帮助。

【讨论】：

谢谢，我会试试看。