В Bootstrap v4 есть следующий пример:

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

Источник: https://getbootstrap.com/docs/4.1/components / input-group / # несколько-вводов

Я бы хотел, чтобы первый вход был больше (шириной), чем второй.

Любые предложения о том, как этого добиться?

1
ncohen 26 Ноя 2018 в 18:45

1 ответ

Лучший ответ

По умолчанию для элементов ввода установлено значение flex-grow на 1, flex-shrink на 1 и гибкость на авто. Вы можете настроить гибкую основу отдельных входов и установить для них желаемую ширину. Я использовал здесь px. Если вы используете%, вам также необходимо учитывать добавление, которое составляет все 100%. Во втором примере я оставил базис на auto, но изменил рост на первом входе на 2, что в два раза больше, чем на втором входе. Этим решением будет проще управлять для повышения отзывчивости:

#fname {
  flex: 1 1 180px;
}

#lname {
  flex: 1 1 80px;
}

#fname2 {
  flex: 2 1 auto;
}

#lname2 {
  flex: 1 1 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control" id="fname">
  <input type="text" aria-label="Last name" class="form-control" id="lname">
</div>
<br>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control" id="fname2">
  <input type="text" aria-label="Last name" class="form-control" id="lname2">
</div>
1
MichaelvE 26 Ноя 2018 в 21:00