如何在引导列之间留出空间[重复]答案

【问题标题】：how to give space between bootstrap columns [duplicate]如何在引导列之间留出空间[重复]
【发布时间】：2021-10-05 05:59:50
【问题描述】：

我正在使用 bootstrap 5，我在一行中创建了 6 列，其中我在行中使用了装订线，但装订线没有应用在它上面，我无法看到列之间的空间。谁能指导我这里做错了什么？以下是我的代码

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box;
}
.myrow{
    background-color: red;
}
<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2">1</div>
        <div class="box col-lg-2">2</div>
        <div class="box col-lg-2">3</div>
        <div class="box col-lg-2">4</div>
        <div class="box col-lg-2">5</div>
        <div class="box col-lg-2">6</div>
        
     </div>

 </div>

【问题讨论】：

你到底想达到什么目标？我的意思是，每一行都用足够的空格正确分隔。 Here 是您示例的链接。
@NagySzabolcs 实际上是在尝试将图像放入列中，然后在所有列之间留出空间，以便我的图像看起来分开

标签： html css bootstrap-5

【解决方案1】：

使用您的代码，我发现排水沟按预期工作。也许您没有看到这一点，因为您将背景颜色应用于列，而不是列容器。有关更多信息，请参见下文。 https://codepen.io/QuiteQuinn/pen/JjNLVbO

.box{
    height: 100px;
    background-color: blue;
}
.myrow{
    background-color: red;
}
span{
    width: 100%;
    background: yellow;
    display: inline-block;
}


<div class="container">
  <div class="row myrow gx-5">
    <div class="box col-lg-2"> <span>1</span></div>
    <div class="box col-lg-2"> <span>2</span></div>
    <div class="box col-lg-2"> <span>3</span></div>
    <div class="box col-lg-2"> <span>4</span></div>
    <div class="box col-lg-2"> <span>5</span></div>
    <div class="box col-lg-2"> <span>6</span></div>
  </div>
</div>

【讨论】：

排水沟不是用于列间距吗？ i 表示第 1 列和第 2 列之间的空格而不是它们的内容之间的空格？
这就是排水沟在 Bootstrap 中的工作方式
为了澄清，gutters 是用于列之间的空间，但这个空间是用填充创建的，并且填充包含在元素的背景中。这意味着当您将蓝色背景应用于具有填充的元素的背景时，填充也会显示为蓝色。
@QuinnKeaveney 那么无论如何要在列之间创建空间并在其列内填充 0 吗？实际上是在尝试将图像放入列中，然后在所有列之间留出空间，以便我的图像看起来是分开的
如果您将图像放在列中，那么预期的效果应该会起作用。看这里。 codepen.io/QuiteQuinn/pen/JjNLVbO

【解决方案2】：

如果我理解正确，您希望图片分列，但在列之间留出一些空间，这样图片就不会发生冲突。

如果您不想使用填充，则始终可以使用边距。在 bootstrap 中，您可以提供 ml-1, ml-2 类（直到 5），这可以为您创造利润。

ml -> 左边距

mr -> 右边距

这是一个基于您的代码的简单示例，希望对您有所帮助！

.box{
    height: 100px;
    background-color: blue;
    box-sizing: border-box; 
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
}
.myrow{
    background-color: red;
}

img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  
}

<div class="container">
     <div class="row myrow gx-5">
        
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        <div class="box col-lg-2"><img src="https://i.imgur.com/8nKVc0s.jpg"></div>
        
     </div>

 </div>

【讨论】：

好的，谢谢，这对我帮助很大