Закрыть разрыв между двумя div, используя bootstrap 4

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 на вашем .row div: 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>

---

Надеюсь, это поможет.