Кнопка ввода и отправки встроенной формы смещена по ширине экрана <576 пикселей - PullRequest
Новая
       12

Кнопка ввода и отправки встроенной формы смещена по ширине экрана <576 пикселей

0 голосов
/ 29 января 2019

Я использую Bootstrap 4.2.1, и у меня есть встроенная форма, которая отлично отображается при ширине области просмотра> 575 px: Form elements nicely line up Однако при ширине области просмотра <576 px кнопка отправки формы становитсясмещено, слегка опущено: <a href="https://i.stack.imgur.com/OVHQt.png" rel="nofollow noreferrer">enter image description here Я повторил эту проблему здесь: 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 ]

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

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

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

Поэтому я вообще отказался от .form-inline и вместо этого использовал сетку форм , используя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>

Это позволяет поддерживать все встроенные функции при очень узкой ширине экрана: inline form at narrow screen widths

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

0 голосов
/ 30 января 2019

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

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

updatedcodeply: 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>
...