3

我试图在两个输入组之间放置一个元素，然后在最后附加两个按钮，但对齐和大小完全关闭。这在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>

我的迁移代码做错了什么？

4

1 回答 1

9

这是我可以为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">
于 2019-01-04T03:52:32.147 回答