Растяжение группы ввода без поля ввода

Question

Может быть неправильное использование компонента входной группы Bootstrap, но должно быть достижимо.

Вот что у меня есть:

И вот как я хотел бы иметь это:

Код, который необходимо исправить:

<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text">This should stretch.</span>
    </div>
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">baz</button>
      <button class="btn btn-secondary" type="button">qux</button>
    </div>
  </div>
</div>

div.cont {
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}

fiddle:https://jsfiddle.net/37o25zay/

Answer 1

Используйте класс boostrap flex-grow-1, чтобы позволить элементу расти и заполнять оставшееся пространство (https://getbootstrap.com/docs/4.2/utilities/flex/#grow-and-shrink)

body {
  padding: 2em;
}

div.cont {
  border-left: 1px dotted gray;
  border-right: 1px dotted gray;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="cont">
  <div class="input-group">
    <div class="input-group-prepend flex-grow-1"> <!-- here -->
      <span class="input-group-text">foo</span>
      <span class="input-group-text">bar</span>
      <span class="input-group-text flex-grow-1">This should stretch.</span> <!-- here -->
    </div>
    <div class="input-group-append">
      <button class="btn btn-secondary" type="button">baz</button>
      <button class="btn btn-secondary" type="button">qux</button>
    </div>
  </div>
</div>