使用 Bootstrap Grid，为什么我的 Div 不能留出空间？

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

Bootstrap 正在将列装订线添加为 15 像素的填充，通过在那里设置布局样式，您还可以设置作为装订线的填充，因此项目网格“卡片”正在触摸。

为此，为了保持间距并确保列均匀，我会改为设置嵌套 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>

如果 guttering 太大，您可以更改 sass 变量（默认设置为 30px），或者您可以使用 .no-gutters 删除所有 guttering 并手动将 padding 添加到嵌套 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>

Answer 2

我在 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 时在列之间添加该空间的一种方法是覆盖引导程序预设的宽度，即 33.33%。

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