Question

  <div class="row justify-content-center">

    <form id="register-form" action="/register" method="POST">

      <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" type="text">
        <div class="alert alert-danger" role="alert">This username is taken</div>
      </div>

      <div class="form-group">
        <input class="form-control" name="password" placeholder="Password" type="password">
      </div>

      <div class="form-group">
        <input class="form-control" name="confirm-password" placeholder="Confirm Password" type="password">
      </div>

      <div class="form-group">
        <button class="btn btn-block btn-primary" type="submit">Register</button>
      </div>

    </form>

  </div>

我希望<div class="alert alert-danger" role="alert">This username is taken</div>出现在for用户名旁边（右侧）；警报是高度和宽度。

这可能吗？

Answer 1

您需要重新布局。

使用.container-xl。
将表单上的全部内容包装在一个列中，并偏移该列，以便在警报不可见时将其内容居中。
对每个输入使用单独的行，其中包含两列。
去掉警报器的填充物，并使其高度为100。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-xl">
  <form class="row justify-content-center" id="register-form" action="/register" method="POST">
    <div class="col-12 col-lg-6 offset-lg-4">
      <div class="row form-group">
        <div class="col-12 col-md-6">
          <input autocomplete="off" autofocus class="form-control h-100" name="username" placeholder="Username" type="text">
        </div>
        <div class="col-12 col-md-6">
          <div class="alert alert-danger py-0 h-100  d-flex align-items-center" role="alert">This username is taken</div>
        </div>
      </div>

      <div class="row form-group">
        <div class="col-12 col-md-6">
          <input class="form-control" name="password" placeholder="Password" type="password">
        </div>
        <div class="col-12 col-md-6">

        </div>
      </div>

      <div class="row form-group">
        <div class="col-12 col-md-6">
          <input class="form-control" name="confirm-password" placeholder="Confirm Password" type="password">
        </div>
        <div class="col-12 col-md-6"></div>
      </div>
      <div class="col-12 col-md-6 pl-md-0">
        <button class="btn btn-block btn-primary" type="submit">Register</button>
      </div>
    </div>
  </form>
</div>

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

如何使引导程序警报的大小与表单组中的输入大小相同？

1 个答案: