使用Bootstrap网格，为什么不能间隔Divs？

Question

我正在开发我的第一个Web开发产品组合，并且正在尝试将Bootstrap Grid系统整合到项目链接中。我已经搜索了Bootstrap的文档（v4.5），Stack Overflow（堆栈溢出），并且只是在搜索各种搜索以至死机。我已经尝试了所有找到的解决方案，但仍然无济于事。我得到的最接近的结果是将所有三个col-lg-4都更改为col-lg33。那确实创造了空间，但是填充看起来很奇怪，而且空间超出了我的需要。任何帮助将不胜感激。我还是一个菜鸟。

<section id="projects">
        <h2>My Work</h2>
        <div class="container">
            <div class="row justify-content-around">
                <div class="col-lg-4 col-md-6 projects-grid">      
                    <a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
                    <img class="project-image" src="Images/TechnicalDoc.png" alt="project"/>
                    <p class="project-title">CSS Technical Document</p>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 projects-grid">
                    <a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
                    <img class="project-image" src="Images/JavascriptDrumkit.png" alt="project"/>
                    <p class="project-title">Javascript Drumkit</p>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 projects-grid">
                    <a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
                    <img class="project-image" src="Images/FirstPersonalSite.png" alt="project"/>
                    <p class="project-title">First Personal Site</p>
                    </a>
                </div>
            </div>
        </div>        
    </section>


#projects {
    background: #3F3F44;
    color: #f7f7f7;
    font-family: 'Raleway', sans-serif;
    height: 100vh;
}

#projects h2 {  
    text-shadow: 1px 1px #fdcb9e;
    text-align: center;
    padding: 60px;
}

.projects-grid {
    background-color: #fdcb9e;
    box-shadow: 5px 8px black;
    border-radius: 10px;
    padding: 1% 0;
}

.projects-grid:hover {
    background-color: #cceabb;
    box-shadow: 7px 10px black;
}

.projects-grid a {
    text-decoration: none;
    color: #3f3f44;
    text-shadow: 1px 1px #cceabb;
}

.project-image {
    height: 100%;
    max-height: 170px;
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    border: 2px solid #cceabb;
    display: flex;
    margin: 0 auto;
}

.project-image:hover {
    border: 2px solid #fdcb9e;
}

.project-title {
    font-size: 1.5rem;
    font-weight: 700;
    padding-top: 8px;
    padding-bottom: 4px;
    margin: 0;
    text-align: center;
}

Answer 1

我已经在Codepen上创建了此链接，以尝试更好地理解问题，以便我们为您提供更好的帮助：

https://codepen.io/maricaldas/pen/ExPKNzM

<section id="projects">
  <h2>My Work</h2>
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-lg-3 col-md-6 projects-grid">
        <a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
          <img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
          <p class="project-title">CSS Technical Document</p>
        </a>
      </div>
      <div class="col-lg-3 col-md-6 projects-grid">
        <a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
          <img class="project-image" src="Images/JavascriptDrumkit.png" alt="project" />
          <p class="project-title">Javascript Drumkit</p>
        </a>
      </div>
      <div class="col-lg-3 col-md-6 projects-grid">
        <a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
          <img class="project-image" src="Images/FirstPersonalSite.png" alt="project" />
          <p class="project-title">First Personal Site</p>
        </a>
      </div>
    </div>
  </div>
</section>

您的意思是您想要一个空格，分隔项目网格列吗？如果是这样，我们需要考虑的第一件事是，当我们使用3个列，每个列占用4个空格时，我们使用的是完整网格，即12，这就是为什么我们在这些col-lg-4周围看不到空格的原因列。

您能否详细说明您想要获得的结果？

[也许在使用col-lg-4时在各列之间添加空格的方法是覆盖bootstrap预设宽度，即33.33％。

@media (min-width: 992px) {
  .col-lg-4 {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
    max-width: 32%;
  }
}

Answer 2

Bootstrap将列装订线添加为15px填充，通过在其中设置布局的样式，还对装订的装订线进行了样式设置，因此项目网格“卡”处于接触状态。

为此，为了保持装订线并确保漂亮的偶数列，我将改用嵌套div的样式。

<div class="col-md-4">
  <div class="projects-grid">
    <a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
    <img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
    <p class="project-title">CSS Technical Document</p>
    </a>
  </div>
</div>

如果装订线太大，则可以更改sass变量（默认情况下设置为30px），也可以使用.no-gutters删除所有装订线，并将填充手动添加到嵌套的div中。

<div class="row no-gutters">
  <div class="col-md-4 p-2">
    <div class="projects-grid">
      <a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
      <img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
      <p class="project-title">CSS Technical Document</p>
      </a>
    </div>
  </div>
</div>