如何停止跳转单列容器的边距

Question

我正在学习Bootstrap，我想创建一个以页面为中心的简单div。

我真的很喜欢container类的自动边距，但在调整窗口宽度时，似乎是基于断点的跳变。

我想让边距变得平滑，直到窗口足够小时变为0。

我试图像这样明确设置一个列布局：

<div class="container border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

但结果是一样的，所有仍然使用的断点。

Answer 1

为此，您不应使用引导容器，因为它们在断点上具有固定的宽度。为了平滑过渡，您应该在%或vw中手动设置宽度到容器，并以相同单位设置边距。

Answer 2

有two types of Bootstrap 4 Container：固定和流体。

从响应的固定宽度容器中选择（意味着它在每个断点处的最大宽度变化）或流体宽度（意味着它始终为100％宽）。

如果您不想要断点，请使用container-fluid类：

使用.container-fluid作为全宽容器，跨越视口的整个宽度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid border">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>

---

如果必须，您可以手动覆盖Bootstrap的响应式max-width设置。

.container.nobreakpoints {
  max-width:100%;
  width:800px; /* maximum width before margins appear */
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container border nobreakpoints">
    <div class="row">
        <div class="col-12">
            <p>container with some content</p>
        </div>
    </div>
</div>