Почему входные группы bootstrap-4 растягиваются, когда другое поле имеет обратную связь? - PullRequest
Новая
       26

Почему входные группы bootstrap-4 растягиваются, когда другое поле имеет обратную связь?

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

У меня есть форма, которая может включать несколько групп ввода в одной строке.Я пытаюсь использовать недействительный отзыв (класс), чтобы обеспечить обратную связь формы, но смежные поля растягиваются вертикально, когда я делаю это.Следующий код представляет собой простой пример 2 строк с 2 входами, показывающими, как растягивается левый столбец при наличии обратной связи в правом столбце.Буду очень признателен за помощь. 

<div class="container mt-3">
  <div class="row">
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">First:</span>
      </div>
      <input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon2">Second:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
      <div class="invalid-feedback">Some text</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">Third:</span>
      </div>
      <select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon4">Fourth:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
      <div class="invalid-feedback">Some other text</div>
    </div>
  </div>
</div>

jsfiddle: https://jsfiddle.net/8e2uo4jL/

1 Ответ

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

Не знаю, нужно ли вам это, но вы должны использовать align-self-start, а также включить d-flex: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
  <div class="row">
    <div class="input-group mb-3 col-6 align-self-start d-flex">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">First:</span>
      </div>
      <input type="text" class="form-control" placeholder="First" aria-label="First" aria-describedby="basic-addon1">
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon2">Second:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Second" aria-label="Second" aria-describedby="basic-addon2">
      <div class="invalid-feedback">Some text</div>
    </div>
    <div class="input-group mb-3 col-6 align-self-start d-flex">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">Third:</span>
      </div>
      <select class="form-control" id="exampleFormControlSelect1" aria-describedby="basic-addon3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
      <div class="invalid-feedback">Should not show</div>
    </div>
    <div class="input-group mb-3 col-6">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon4">Fourth:</span>
      </div>
      <input type="text" class="form-control is-invalid" placeholder="Fourth" aria-label="Fourth" aria-describedby="basic-addon4">
      <div class="invalid-feedback">Some other text</div>
    </div>
  </div>
</div>
...