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

【问题标题】：How to make bootstrap alert same size as input in a form-group?如何使引导警报与表单组中的输入大小相同？
【发布时间】：2020-07-27 17:06:25
【问题描述】：

  <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> 出现在用户名旁边（右侧）；警报是高度和宽度。

这可能吗？

【问题讨论】：

旁边是什么意思？左还是右？
去这个<div class="form-group row"> <input autocomplete="off" autofocus class="form-control col" name="username" placeholder="Username" type="text"> <div class="alert alert-danger col py-1 my-auto" role="alert">This username is taken</div> </div>
@mahan 向右

标签： html css twitter-bootstrap bootstrap-4

【解决方案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

【讨论】：