主页 / coding / 问题 / 79447471
Accepted
Xyla
Asked: 2025-02-18 15:44:41 +0800 CST

如何在 Bootstrap 5 中在列之间添加间隙而不移动到另一行？

  • 772

我正在制作一个具有如下结构的推荐部分：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
    <div class="row"> (row of the testimonial card)
        <div class="col"> (content/testimonial card)
        <div class="col"> (content/testimonial card)
    </div>
</div>

为了便于布局，每列（推荐卡）内有更多行和列

问题是，当我尝试在“推荐卡行”上添加间隙时，推荐卡会堆叠成 1 列，而不是 2 列（应该是 2 列），即使间隙是最低的

  • 首先我尝试使用 row-cols-2，但它不起作用
  • 其次，我尝试通过添加 w-50 和 col-6 （及更低）来减小两张卡的尺寸，但仍然不起作用
  • 最后一步是我尝试删除包含行和列（卡片）的“容器”类，但仍然不起作用

它看起来应该是这样的：

它看起来应该是这样的：

结果：

结果

html

2 个回答

  1. 在列之间添加间距，看看是否有帮助。

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-4">(row of the testimonial card)
    <div class="col">
      (content/testimonial card)
    </div>
    <div class="col">
      (content/testimonial card)
    </div>
  </div>

    查看文档：Bootstrap Horizo​​ntal Gutters

    • 0
  2. Best Answer

    您可以根据需要在列和行之间添加间距。

    但是，当您在列之间添加边线时，您需要将边框应用于.col元素的子元素，否则它们将显示为相邻。

    希望这有帮助。

    例如：

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container overflow-hidden text-center d-flex ustify-content-between">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border">Custom column padding</div>
    </div>
  </div>
</div>

<hr class="my-5" />

<div class="container">
  <div class="row g-2"> <!--(row of the testimonial card)-->
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
    <div class="col">
      <div class="p-3 border">(content/testimonial card)</div>
    </div>
  </div>
</div>

    • 0

相关问题