Bootstrap 4 个输入组附加在两个输入之间

Question

我试图在两个输入组之间放置一个元素，然后在末尾附加两个按钮，但对齐和大小调整完全不对。这在 Bootstrap v3.3.7 中完美运行，但自从升级到 Bootstrap v4.1 我无法得到它上班。

这是它在 v3.3.7 中的样子：

这是我的 v3.3.7 代码：

<div class="col-lg-10 text-right">
  <form role="form" class="form-inline" method="get">
    <div class="form-group" id="data_5">
      <div class="input-group my-2" id="datepicker">
        <input type="date" class="input-sm form-control" name="start_date" value="2019-01-03" max="2019-01-04">
        <span class="input-group-addon">to</span>
        <input type="date" class="input-sm form-control" name="end_date" value="2019-01-03" max="2019-01-04">
      </div>
    </div>
    <button class="btn mt-2 btn-sm btn-success" type="submit">Update</button>
    <button type="button" class="reset btn mt-2 btn-sm btn-primary" data-column="0" data-filter="">
      <i class="bootstrap-icon-white glyphicon glyphicon-filter"></i> Reset filters
    </button>
  </form>
</div>

这是 v4.1 中的样子：

这是我的 v4.1 代码：

<div class="col-lg-10">
  <div class="float-right">
    <form role="form" class="form-inline" method="get">
      <div class="form-group" id="data_5">
        <div class="input-group my-2" id="datepicker">
          <input type="date" class="input-sm form-control" name="start_date" value="2019-01-03" max="2019-01-04">
          <span class="input-group-addon input-group-sm">to</span>
          <input type="date" class="input-sm form-control" name="end_date" value="2019-01-03" max="2019-01-04">
          <div class="input-group-append">
            <button class="btn mt-2 btn-sm btn-success" type="submit">Update</button>
            <button type="button" class="reset btn mt-2 btn-sm btn-primary" data-column="0" data-filter="">
              <i class="bootstrap-icon-white glyphicon glyphicon-filter"></i> Reset filters
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

我的迁移代码哪里做错了？

Answer 1

这是我能到达 Bootstrap 4 的最佳端口。我将只解释主要的变化：

1) 要在两个输入之间放置一个插件，请使用：

<input class="form-control">
<div class="input-group-prepend input-group-append">
  <span class="input-group-text">to</span>
</div>
<input class="form-control">

2) Glyphicons 没有 Bootstrap 4，所以我用 font-awesome 代替。

3) 我将按钮上的 mt-2 类替换为 ml-2 类.

其余的细节可以在下一个例子中检查：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">

<!-- Porting begin -->
<div class="col-lg-10">

  <form role="form" class="form-inline" method="get">

    <div class="form-group" id="data_5">
      <div class="input-group input-group-sm my-2" id="datepicker">
        <input type="date" class="form-control" name="start_date" value="2019-01-03" max="2019-01-04">
        <div class="input-group-prepend input-group-append">
          <span class="input-group-text">to</span>
        </div>
        <input type="date" class="form-control" name="end_date" value="2019-01-03" max="2019-01-04">
      </div>
    </div>

    <button class="btn btn-sm btn-success ml-2" type="submit">Update</button>
    <button type="button" class="reset btn btn-sm btn-primary ml-2" data-column="0" data-filter="">
      <i class="fas fa-filter"></i> Reset filters
    </button>

  </form>
  
</div>
<!-- Porting end -->

</div>
</div>

此外，如果您想要将所有元素对齐到包含表格的列的右侧，请使用：

<div class="col-lg-10 d-flex justify-content-end">

替代：

<div class="col-lg-10">

Bootstrap 4 个输入组附加在两个输入之间

Bootstrap 4 input group add-on between two inputs

bootstrap-4

bootstrap-4.1.x