如何用Bootstrap实现三个div同行并解决间距过大问题？

嘿，我来帮你解决这个Bootstrap布局的问题！你遇到的大间距问题，大概率是没利用好Bootstrap自带的间距控制工具，或者误用了默认的栅格间距。下面给你两种靠谱的解决方案，按需选择：

方案1：调整栅格系统的间距（适合需要响应式布局的场景） #

Bootstrap的row组件默认带有gx-3的水平间距（也就是gutter），这个间距在很多场景下会显得偏大。你只需要把gx-3换成更小的间距类，比如gx-1或gx-2，就能得到你想要的少量间距效果：

<div class="container">
  <div class="row gx-2"> <!-- gx-2是比默认小的水平间距，gx-1是最小档 -->
    <div class="col">
      <div class="bg-light border p-3">第一个Div</div>
    </div>
    <div class="col">
      <div class="bg-light border p-3">第二个Div</div>
    </div>
    <div class="col">
      <div class="bg-light border p-3">第三个Div</div>
    </div>
  </div>
</div>

如果需要更精细的垂直间距，还可以搭配gy-*类，比如gy-1来控制上下间距。

方案2：用Flex布局+Gap类（更灵活的自定义间距） #

如果你不需要严格的栅格响应式，只是想让三个Div在一行且间距可控，用d-flex配合gap-*类会更直接——gap属性专门用来控制flex容器内元素的间距：

<div class="d-flex gap-2"> <!-- gap-2对应少量间距，可选gap-1到gap-5 -->
  <div class="bg-light border p-3 flex-fill">第一个Div</div>
  <div class="bg-light border p-3 flex-fill">第二个Div</div>
  <div class="bg-light border p-3 flex-fill">第三个Div</div>
</div>

这里的flex-fill是让三个Div平分容器宽度，如果不需要平分，去掉这个类就行，Div会自适应内容宽度。

排查你之前的问题 #

你之前出现大间距，可能是这几个原因：

• 用了默认的row没调整gx-*类，默认间距偏大；
• 给每个Div单独加了mx-3这类左右margin类，叠加后间距过大；
• 没有用Bootstrap的布局组件（比如row或d-flex），而是用了原生float，导致布局失控。

试试上面的方案，应该就能得到你想要的效果啦！

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