如何将标签放置在搜索输入框下方？Bootstrap布局问题排查

你的布局存在两个核心问题，导致标签无法对齐到搜索输入框正下方：

• 标签容器<div class="col-12">没有嵌套在表单内部的.row结构中，脱离了搜索输入框的布局上下文，无法和输入框保持对齐。
• 搜索输入框所在的.col-9没有设置水平居中，即使调整结构，也会出现偏移。

修正后的HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

<div class="container">
  <div class="search-box">
    <form method="GET" action="" class="text-center">
      <div class="row justify-content-center">
        <!-- 让输入框列居中 -->
        <div class="col-9">
          <div class="search-input-group">
            <input type="search" name="search" class="form-control" placeholder="搜索内容" value="">
            <button type="submit" class="btn btn-primary">提交</button>
          </div>
        </div>
        <!-- 将标签容器嵌套在同一row里，确保和输入框对齐 -->
        <div class="col-9 mt-1">
          <span class="badge bg-secondary tag" data-tag="Midjourney">Midjourney</span>
          <span class="badge bg-secondary tag" data-tag="ChatGPT">ChatGPT</span>
          <span class="badge bg-secondary tag" data-tag="Dalle2">Dalle2</span>
        </div>
      </div>
    </form>
  </div>
</div>

关键调整说明 #

1. 给表单内的.row添加justify-content-center类，让.col-9水平居中，确保输入框和标签容器都处于页面中间位置。
2. 将标签容器<div class="col-9 mt-1">移动到表单的.row内部，和输入框所在的.col-9同级，这样标签容器会继承和输入框相同的宽度，自然对齐到输入框正下方。
3. 移除了表单上重复的search-box类，避免样式冲突。

内容的提问来源于stack exchange，提问作者Carol.Kar