Поддержка множественного ввода в Bootstrap 3.3.7 - PullRequest
Новая
       6

Поддержка множественного ввода в Bootstrap 3.3.7

0 голосов
/ 01 июня 2018

В Bootstrap 4 предусмотрена функция множественного ввода, которая выглядит следующим образом: 

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

Существует ли тривиальный способ воспроизвести это поведение с помощью Bootstrap 3.3.7?Требуется ли удаление стилей из Bootstrap 4, или я что-то пропускаю в 3.3.7, что уже позволяет такое поведение?Документация доступна здесь: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Небольшой CSS даст вам тот же эффект.

В следующем фрагменте я создал класс css input-multiple и соответствующим образом изменил стиль CSS.Отрегулируйте ширину поля по мере необходимости, здесь я просто изменил width:100%, связанный с Bootstraps .form-control class 

.input-multiple>input.form-control {
  width: auto;
}

.input-multiple>input.form-control+input.form-control {
  border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
  <div class="row">
    <div class="col-lg-6">
      <div class="input-group input-multiple">
        <span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
        <input type="text" class="form-control" placeholder="First Name">
        <input type="text" class="form-control" placeholder="Last Name">
      </div>
    </div>
  </div>
</div>
0 голосов
/ 01 июня 2018

Я не могу сказать, что это тривиально или нет, но с некоторым дополнительным CSS и с помощью Bootstrap Grid вы можете добиться аналогичных результатов: 

.input-group-multi [class*='col-'] {
  margin: 0 !important;
  padding: 0 !important;
}

.input-group-multi .form-control {
  border-right: 0;
}

.input-group-multi [class*='col-']:last-child .form-control {
  border-radius: 0 4px 4px 0;
  border-right: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-6"><input type="text" class="form-control"></div>
  <div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>

<br />

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
  <div class="col-xs-4"><input type="text" class="form-control"></div>
</div>


<br />

<div class="input-group input-group-multi">
  <div class="input-group-addon">First and last name</div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
  <div class="col-xs-3"><input type="text" class="form-control"></div>
</div>

В приведенном фрагменте кода вы можете увидеть, как .input-group-mutli является своего рода тяжелым грузом.С помощью этого нового класса мы можем использовать подстановочный знак в столбце Bootstrap Grid, чтобы удалить все поля и отступы.Уже одно это приведет вас к тому, что ваши множественные входные данные будут хорошо выровнены ... но с удвоением границ.

Небольшой дополнительный CSS для обнаружения удаления правой границы и последующего повторного применения этой границы к последний столбец + ввод предоставляет вам отличное место для функции множественного ввода.С одним исключением, конечно;это предполагает, что input-group-addon всегда слева.

...