如何阻止单列容器跳变边距

Question

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

我很喜欢containerclass的那个自动边距，但是在调整window宽度时，它似乎是根据断点跳变的。

我想让边距平滑地变小，直到window足够小时它们变成0。

我试过像这样显式设置一列布局：

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

但结果是一样的，断点都还在用。

Answer 1

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

Answer 2

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

Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

如果您不需要断点，请使用 container-fluid class:

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<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>

如何阻止单列容器跳变边距

How to stop jump-changing margins of single column container

css

margin

viewport

bootstrap-4