Question

我有一个使用普通的旧CSS的Laravel Web应用程序：

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

  <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;
}

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

Answer 1

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

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

Answer 2

您可以使用表单组，例如在其示例中使用引导程序：https://getbootstrap.com/docs/4.1/components/forms/

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

CSS：以Bootstrap形式垂直对齐输入

2 个答案: