尴尬的按钮定位

Question

我想使用 Bootstrap 5.

创建一个带有表单输入和提交按钮的 input-group

我的代码：

.card {
  margin: auto;
  width: 50%;
  padding: 10px;
  opacity: 0.9!important;
  top: 250px;
}

<div class="card-header">Login</div>
<div class="card-body">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="input-group mb-3">
      <div class="form-group col-md-6 input-group-prepend">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group col-md-6 input-group-append">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>
</div>

但是，问题是我的按钮尺寸非常笨拙，并且比输入表单高一点。图片

我该如何解决这个问题？

Answer 1

只需将 align-items-end 添加到 input-group

.card {
    margin: auto;
    width: 80%;
    padding: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" >
<div class="card text-white bg-dark mb-3" style="max-width: 46rem;">
  <div class="card-header">Login</div>
  <div class="card-body">
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="input-group mb-3 align-items-end"> 
            <div class="form-group col-md-6 input-group-prepend">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group col-md-6 input-group-append">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
  </div>
</div>

尴尬的按钮定位

Awkward button positioning

html

css

bootstrap-5