Bootstrap栅格布局下如何实现行内两个div并排且拉近间距

无法并排显示的修复方案 #

• 先确认已正确引入Bootstrap核心CSS文件，栅格系统的横向布局规则完全依赖Bootstrap的预设样式，未引入样式时col会默认占满整行宽度，自然无法并排。
• 你当前使用的是col-md-*断点规则，只有当页面视口宽度≥768px时才会触发横向布局，小于该宽度会自动堆叠为纵向。如果需要在更小屏幕下也保持并排，可将md替换为更小的断点，比如sm，Bootstrap5中如果不需要断点直接写col-3、col-9即可实现全尺寸下并排。

拉近两个模块间距的实现方法 #

Bootstrap栅格默认给每个col设置了左右各15px的内边距（gutter），两个模块相邻的总间距就是30px，可通过以下方式调整：

• 使用Bootstrap原生的gutter调整类：给row添加gx-*类（Bootstrap5，*代表间距数值，数值越小间距越小，比如gx-1就是水平间距设为4px），Bootstrap4可以先给row加no-gutters类清除默认间距，再按需给col自定义少量内边距即可。
• 你左侧卡片设置了max-width: 12rem的固定最大宽度，不会占满整个col宽度，也是视觉上间距偏大的原因，可根据需求调大该数值，或者直接设为max-width: 100%让卡片占满列宽，进一步缩小和右侧搜索区域的距离。

调整后参考代码 #

<div class="container-fluid">
  <!-- gx-1调整水平列间距，数值可按需修改 -->
  <div class="row gx-1">
    <!-- 无断点的col-3可以在所有尺寸下保持横向布局，需要响应式可再加col-md-3 -->
    <div class="col-3">
        <!-- 修改max-width为100%让卡片占满列宽 -->
        <div class="card  border-info mb-3" style="max-width: 100%; min-height: 200px;">
          .....
       </div>
    </div>
    <div class="col-9">
        <section class="search-sec">
            <div class="border border-info py-3 px-lg-5">
                <div class="container-fluid">
                    <form asp-action="Index" method="get">
                     ..............
                  </form>
                </div>
             </div>
         </section>
       </div>
   </div>
 </div>

内容的提问来源于stack exchange，提问作者user4912134