引导行不占据 100% 宽度

Answer 1

万一其他人遇到这个问题并且答案不能解决他们的问题，导致此问题的问题是因为我没有意识到我正在添加一行并尝试在 Bootstrap 导航栏中设置列。默认情况下，导航栏已经有一个类似网格的系统，因此如果您尝试在其中添加列，那么您似乎将其推到了边缘。无论如何，它们都没有必要。

因此，如果这个答案不能解决您的问题，请检查您是否位于另一个已经处理间距的 Bootstrap 组件内。您可能正在尝试对您的内容进行双重定界！

Answer 2

将其从

container

中取出。

container

不是 100% 宽度，不应嵌套在另一个容器中。

Answer 3

container

类有这样的效果。

<div class="container">
    <div class="row">
        <div class="col-12">
            div into <b>container</b> class
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            div into <b>container-fluid</b> class
        </div>
    </div>
</div>

此代码将生成以下图像：

Answer 4

在我的例子中，甚至容器流体也不起作用，因为我在同一 div 中使用了带有容器流体的行类。因此，我从父 div 中删除了行类，并在其中创建了一个子 div 并使用了行类。然后就成功了。

<div class="container-fluid row">
    <div class="col-12">
        didn't work
    </div>
</div>

<div class="container-fluid">
<div class="row">
    <div class="col-12">
        worked
    </div>
</div>
</div>

Answer 5

我刚刚遇到了类似的挑战，嵌入式 iframe 没有占据整行。我正在使用 bootstrap 5。以下是让 iframe 占据 100% 宽度并具有响应能力的方法：

<div class="row">
  <div class="ratio ratio-16x9">
      <iframe src="https://www.youtube.com/embed/cTp3w2ZUUxw?rel=0" allowfullscreen></iframe>
  </div>
</div>

ratio

和

ratio-16x9

是Bootstrap 5中的新功能，使这一切变得超级简单。