Question

我正在使用Bootstrap 4.2.1，并且有一个内联窗体，该窗体可以在视口宽度> 575 px时完美显示：但是，在视口宽度<576 px处，表单提交按钮变得未对齐，略有下降：我已经在这里复制了问题：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>

有什么想法为什么会在较小的屏幕宽度上发生？

Answer 1

这就是我最终要做的，而不必自定义核心的Bootstrap CSS。

我了解到.form-inline only displays form elements inline at screen widths of at least 576 px。另外，如上所述，当我应该在输入上使用.form-group时，我错误地使用了.form-inline和.input-group。但这仍然不允许我在小于576 px的窄屏宽度上保持内联。

因此，我完全放弃了.form-inline，而是通过Bootstrap的内置网格类使用了form grid方法。我使用.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>

这使所有内容以非常窄的屏幕宽度保持内联：

很显然，可以更改列以适合特定应用程序或首选项的需求。

Answer 2

在576像素之后，form-control删除了inline block属性，因此我将其用于所有分辨率。

对于btn，我正在使用mt-n3 mt-sm-0引导程序类。

更新后的代码：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>

内联表单输入和提交按钮在屏幕宽度<576像素时未对齐

2 个答案: