Я использую Bootstrap 4.2.1, и у меня есть встроенная форма, которая отлично отображается при ширине области просмотра> 575 пикселей: Элементы формы красиво выстраиваются в линию Однако при ширине области просмотра <576 пикселей кнопка отправки формы становится смещенной, слегка опускаясь: введите описание изображения здесь Я воспроизвел проблему здесь: https://www.codeply.com/go/hW1xZkJXQ9

<div class="container">
    <div class="row">
        <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="Email">Email address</label>
            <input type="email" class="form-control mr-2" id="Email" placeholder="user@gmail.com">
        </div>
        <button class="btn btn-primary" type="submit">Add</button>
        </form>
    </div>
</div>

Есть идеи, почему это происходит при меньшей ширине экрана?

2
bhall 29 Янв 2019 в 23:58

2 ответа

Лучший ответ

Вот что я в итоге сделал, не настраивая основной CSS Bootstrap.

Я узнал, что .form-inline отображает только встроенные элементы формы при ширине экрана не менее 576 пикселей. Кроме того, я неправильно использовал .form-group вместе с .form-inline, когда я должен был использовать .input-group на входах, как было указано выше. Но это по-прежнему не позволяло мне сохранять элементы на экране при ширине экрана менее 576 пикселей.

Поэтому я полностью отказался от .form-inline и вместо этого использовал сетку форм / a> с использованием встроенных классов сетки Bootstrap. Я использовал .form-row и обработал встроенные элементы формы как обычные столбцы:

Обновленный Codeply: https://www.codeply.com/go/hwBPwM6qTV

<div class="container">
<form>
    <div class="form-row">
        <div class="col-8 col-sm-5 col-md-4">
            <div class="form-group">
                <label class="sr-only" for="Email">Email address</label>
                <input type="email" class="form-control" id="Email" name="Email"  placeholder="user@gmail.com">
            </div>
        </div>
        <div class="col">
            <button class="btn btn-primary" type="submit">Add</button>
        </div>        
    </div> <!-- .form-row -->
</form>
</div>

Это сохраняет все встроенным при очень узкой ширине экрана: встроенная форма при малой ширине экрана

Очевидно, что столбцы можно изменить в соответствии с потребностями конкретного приложения или предпочтений.

2
bhall 31 Янв 2019 в 21:02

После 576px, form-control удалить свойство inline block, поэтому я добавлю его для всех разрешений.

А для btn я использую класс начальной загрузки mt-n3 mt-sm-0.

Обновленный codeply: https://www.codeply.com/go/35ENnBhxpA

body {
    padding:100px;
}
.form-control {
    display: inline-block !important;
    width: auto;
    vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
      <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="Email">Email address</label>
            <input type="email" class="form-control mr-2" id="Email" placeholder="user@gmail.com">
        </div>
        <button class="btn btn-primary mt-n3 mt-sm-0" type="submit">Add</button>
    </form>
  </div>
</div>
0
Nisharg Shah 29 Янв 2019 в 21:10