UI布局问询：组件单行对齐及搜索栏与日期控件布局调整

阿华AIGC实验室

2026-5-25

嘿，我来帮你搞定这两个UI布局问题！看你代码里用到了Bootstrap的row和input-group类，那我就基于Bootstrap给你整理可行的解决方案，亲测有效：

需求1：两个文本框+搜索按钮右对齐且同一行

用Bootstrap的flex布局特性，给外层row加上右对齐类，再让每个元素自适应宽度，就能轻松实现效果：

<div style="padding-bottom:10px;">
  <div class="row justify-content-end">
    <div class="col-auto">
      <input type="text" class="form-control" placeholder="文本框1">
    </div>
    <div class="col-auto ms-2">
      <input type="text" class="form-control" placeholder="文本框2">
    </div>
    <div class="col-auto ms-2">
      <button class="btn btn-primary">搜索</button>
    </div>
  </div>
</div>

justify-content-end让整个行内的元素靠右对齐
col-auto让每个输入框/按钮自适应自身宽度，不会过度拉伸
ms-2给元素之间加小间距，避免挤在一起影响美观

需求2：搜索栏左对齐，日期控件+搜索按钮右对齐（优先同一行）

这里用d-flex+justify-content-between实现左右分栏，同时加换行特性保证小屏幕下自动换行：

<div style="padding-bottom:10px;" class="d-flex justify-content-between align-items-center flex-wrap gap-2">
  <!-- 左对齐的搜索栏 -->
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="搜索栏">
  </div>
  <!-- 右对齐的日期控件组 -->
  <div class="d-flex align-items-center gap-2">
    <input type="date" class="form-control" placeholder="From日期">
    <input type="date" class="form-control" placeholder="To日期">
    <button class="btn btn-primary">搜索</button>
  </div>
</div>