Отрегулируйте размер ввода в Bootstrap 4

Question

Кажется, что ширина элемента select и элемента input равны. Как сделать так, чтобы элемент input занимал гораздо больше места, а select занимал бы меньше места?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control">
</div>

Answer 1

Вам нужно добавить col- * class к вашему выбору

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select col-3" id="inputGroupSelect03">
    <option selected>Choose...</option>
    <option value="1">One</option>
  </select>
  <input class="form-control col">
</div>

.input-group уже имеет стиль .row, поэтому не нужно давать .row учебный класс. если вы даете .row, то это дает отрицательную маржу, которая не необходимо.

Answer 2

Попробуйте добавить col-* классы в выбор и введите:

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
      <div class="input-group mb-3 row">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">Button</button>
        </div>
        <select class="custom-select col-4" id="inputGroupSelect03">
          <option selected>Choose...</option>
          <option value="1">One</option>
        </select>
        <input class="col-8 form-control">
      </div>