时间戳

首页 > 解决方案 > 在列中居中输入组

css - 在列中居中输入组

问题描述

我正在使用引导程序 5，并且创建了一个带有文本和输入组的框，如下所示：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container border">
  <div class="row align-items-center">
    <div class="col">
      Enter your email address to receive notifications about the product.
    </div>
    <div class="col">
      <div class="input-group mb-3">
        <form>
          <input type="text" class="form-control" placeholder="Your Email Address" aria-label="Your Email Address" aria-describedby="button-addon2">
          <button class="btn btn-warning" type="button" id="button-addon2">Start Monitoring</button>
        </form>
      </div>
    </div>
  </div>
</div>

如您所见，input-group它与文本不对齐。任何建议为什么？我已经将所有列居中。

感谢您的回复！

标签： csstwitter-bootstrap

解决方案

这是更正后的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container border">
  <div class="row align-items-center">
    <div class="col">
      Enter your email address to receive notifications about the product.
    </div>
    <div class="col">
      <form>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Your Email Address" aria-label="Your Email Address" aria-describedby="button-addon2">
          <button class="btn btn-warning" type="button" id="button-addon2">Start Monitoring</button>
        </div>
      </form>
    </div>
  </div>
</div>

你有一个<form>标签里面input-group。应该是其他的。输入和按钮应该直接驻留input-group在引导程序中。

推荐阅读