引導程式中的容器類有問題嗎？

這是鏈接https://vkacademy.in/newm.html

當我為每個部分創建一個容器時，我會在每個容器之間獲得空間，如何避免每個容器的空間。

當您看到輸出時，我為我突出顯示的每個容器獲得了空間。如何避開空間？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

您看到的空間確實在段落上，但洗掉它不是正確的方法。相反，使用overflow-hidden該類使容器圍繞該空間。

請注意，我已經移除了外部容器包裝。這不是必需的，也不符合Bootstrap 的布局檔案。容器不應該直接嵌套，并且很少應該以任何方式嵌套。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 的布局結構，包括行和列元素。這會自動處理溢位，無需額外的類。注意只需要一個容器。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

試試這個，你在標簽中的問題<p>，我添加了新類.mb-0

.one {
  background: red;
}

.two {
  background: green;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

請使用此代碼。因為這是“容器”中“p-0”和“m-0”類的正確使用。

例子：container p-0 m-0

標籤：推特引导 引导程序 5

上一篇：jQuery更改在bootstrap5選項卡中不起作用

下一篇：為什么在使用Bootstrap5時標題不在導航和頁腳之間垂直居中？