引导程序中的容器类有问题吗？答案

【问题标题】：Having issue with container class in bootstrap?引导程序中的容器类有问题吗？
【发布时间】：2022-02-08 04:07:57
【问题描述】：

当我为每个部分创建一个容器时，我会在每个容器之间获得空间，如何避免每个容器的空间。

当您看到输出时，我会为我突出显示的每个容器获得空间。如何避开空间？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="container bg-danger">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <div class="container bg-success">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
</div>

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

您看到的空格确实在段落上，但删除它不是正确的方法。相反，请使用 overflow-hidden 类使容器围绕该空间。

请注意，我已移除外部容器包装。这不是必需的，也不符合 Bootstrap's documentation 的布局。容器不应该直接嵌套，并且很少应该以任何方式嵌套。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container bg-danger overflow-hidden">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>

<div class="container bg-success overflow-hidden">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>

更好的解决方案是按预期使用Bootstrap's layout structure，包括行和列元素。这会自动处理溢出，无需额外的类。注意只需要一个容器。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row bg-danger">
    <div class="col">
      <h1>Bootstrap Tutorial</h1>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
    </div>
  </div>

  <div class="row bg-success">
    <div class="col">
      <h1>Bootstrap Tutorial</h1>
      <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

试试这个，您在标签<p> 中的问题，我添加新类.mb-0

.one {
  background: red;
}

.two {
  background: green;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="bg-danger">
    <h1>Bootstrap Tutorial</h1>
    <p class="mb-0">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <div class="container bg-success">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
</div>

【讨论】：

删除段落间距不是正确的方法。你应该包含它。然后，您的自定义背景类是完全没有必要的。如原始代码所示，Bootstrap 的主题已经处理了。

【解决方案3】：

请使用此代码。因为这是“容器”中“p-0”和“m-0”类的正确使用。

示例：container p-0 m-0

【讨论】：

我试过了，似乎两个 div 都没有解决方案
检查我上传到服务器的链接没有反射vkacademy.in/newm.html
欢迎来到 StackOverflow！请注意：使用非常个性化的敬语，例如“亲爱的”、“亲爱的”等……可能会被视为不尊重或居高临下，即使这根本不是你的本意。最好避免在诸如此类的技术网站上使用此类术语。