CSS：以引导形式垂直对齐输入答案

【问题标题】：CSS: align input vertically in Bootstrap formCSS：以引导形式垂直对齐输入
【发布时间】：2019-06-03 04:54:23
【问题描述】：

我有一个使用普通 CSS 的 Laravel 网络应用程序：

我想要一个简单的注册表单，其中包含一个名称字段、一个电子邮件字段和两个密码字段。我想将它们彼此对齐，而不是在下面的屏幕截图中如何完成

  <form class="form-inline d-flex" action="{{ route('register') }}" method="post" novalidate>
   @csrf
   <input
      type="text"
      class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }} flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0"
      placeholder="Enter name"
      name="name"
      value="{{ old('name') }}"
      required
   >
   @if ($errors->has('name'))
     <span class="invalid-feedback">
        <strong>{{ $errors->first('name') }}</strong>
     </span>
   @endif

   <input
      type="email"
      class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }} flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0"
      placeholder="Enter email"
      name="email"
      value="{{ old('email') }}"
      required
   >
   @if ($errors->has('email'))
     <span class="invalid-feedback">
       <strong>{{ $errors->first('email') }}</strong>
     </span>
   @endif
   ...
   ...
   <button type="submit" class="btn btn-primary btn-block">
       @lang('Create new account')
   </button>
 </form>

相关的css如下：

.register-section {
    padding: 10rem 0;
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(rgba(22, 22, 22, 0.1)),
            color-stop(75%, rgba(22, 22, 22, 0.5)),
            to(#161616)
        ),
        url("../img/bg-signup.jpg");
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%),
        url("../img/frontend/bg-signup.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.register-section .form-inline input {
    -webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
    padding: 1.25rem 2rem;
    height: auto;
    font-family: 'Varela Round';
    font-size: 80%;
    letter-spacing: 0.15rem;
    border: 0;
}

如何确保输入字段垂直对齐（带有一些垂直填充）？

【问题讨论】：

标签： css

【解决方案1】：

使用 Bootstrap 4，要使输入垂直堆叠，当您使用 d-flex 时，您还需要将 flex-column 类添加到表单中。

<form class="form-inline d-flex flex-column"...

【讨论】：

谢谢。这确实解决了它。还通过
添加了一些填充

【解决方案2】：

您可以使用表单组，例如 bootstrap 在他们的示例中使用：https://getbootstrap.com/docs/4.1/components/forms/

我不知道您是否可以将引导网格系统与表单一起使用，但也许这可能是一个解决方案？

【讨论】：

不，用 form-group 围绕每个元素将所有元素放在 1 个水平行上