Bootstrap 4 входная группа надстройки между двумя входами - PullRequest
Новая
       16

Bootstrap 4 входная группа надстройки между двумя входами

0 голосов
/ 04 января 2019

Я пытаюсь поместить элемент между двумя группами ввода, затем добавить две кнопки, но выравнивание и размер полностью отключены.Это прекрасно работало в v3.3.7, но после обновления до v4.1 я не могу заставить его работать.

Вот как это выглядело в 3.3.7: enter image description here

Вот мой код 3.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>

Вот как это выглядит в 4.1: enter image description here

Вот мой код 4.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>

Что я делаю не так с переносом кода?

1 Ответ

0 голосов
/ 04 января 2019

Это лучший порт, который я могу сделать для 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">
...