用于 xs、sm 的引导容器流体答案

【问题标题】：Bootstrap Container Fluid for xs, sm用于 xs、sm 的引导容器流体
【发布时间】：2016-03-14 15:21:33
【问题描述】：

我希望我最外层的 div 容器只是用于 md 和 lg 的“容器”，而用于 xs 和 sm 的容器流体。我可以在本地实现这一点吗？我需要一些额外的 CSS 吗？

谢谢。

【问题讨论】：

【解决方案1】：

2020 年更新：

从 Bootstrap 4.4 开始，现在有 responsive containers:

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Demo

原答案：

container 和 container-fluid 在 xs 断点上是相同的，因为它们都是全宽的。要覆盖 sm 断点的宽度，您可以这样做..

@media (max-width: 992px) {
   .container {
      width: 100%;
   }
}

Demo

【讨论】：

来了！ Bootstrap 4.4 有你需要的 .container-md 类。容器在 768px 以下是流动的，并且在上面有边距。请参阅文档：getbootstrap.com/docs/4.4/layout/overview/#containers
我这样做了/* // Small devices (landscape phones, 414px and up) */ @media (min-width: 414px) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .container { max-width: 95%; } }

【解决方案2】：

Bootstrap 4(.4) 自带：

.container，在每个响应断点设置一个最大宽度

.container-fluid，即所有断点处的宽度：100%

.container-{breakpoint}，也就是宽度：100%直到指定

所以，在你的情况下，你可以设置：

<div class="container-md">

为 xs 和 sm（流体）实现 100% 宽度的容器，并在其上方实现部分宽度

参考：https://getbootstrap.com/docs/4.4/layout/overview/

【讨论】：

【解决方案3】：

使用 Bootstrap 4
纯CSS：

@media (max-width: 768px) {
  .container {
    width: 100%;
    max-width: none;
  }
}

如果你使用 Sass：

@include media-breakpoint-down(md) {
  .container {
    width: 100%;
    max-width: none;
  }
}

演示：https://codepen.io/albertojacini/pen/KXgNqB

【讨论】：

你应该使用 media-breakpoint-down(sm) 因为他要求 xs 和 sm，而不是 md
这是最好的方法，不要弄乱供应商文件。也适用于 Laravel app.scss...

【解决方案4】：

如前所述，这是 Bootstrap 4 的解决方案

问题

目前，我们有一个用于xs 视口的全宽边到边流体容器。然后我们为sm、md、lg 等设置了固定大小的容器。

由于sm 视口也被认为是一个小型设备，有时我们也希望在那里拥有全宽的边到边流体容器，就像 xs 一样。

解决方案

如果您自己从 SCSS 编译 Bootstrap，那么您可以通过删除 max-width 的 sm 断点来简单地覆盖变量 $container-max-widths。 这是一个整洁干净的解决方案我会推荐。

在 Bootstrap 源代码中找到（供应商）_variables.scss:

$container-max-widths: (
  sm: 540px, // <-- we are going to remove this line
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

复制到您的自定义文件并通过删除 sm 定义行和删除 !default 关键字来覆盖，例如在_my-variables.scss 文件中：

$container-max-widths: (
  md: 720px,
  lg: 960px,
  xl: 1140px
);

详细了解Theming Bootstrap with your own SCSS variables。

如果您不自己编译 Bootstrap，那么您肯定会想要。这是您将在那里找到的全新级别的魔法。

【讨论】：

是的，这是sass最好的办法，我一般去掉sm,md,lg。
如果你只有一个 .container 也没关系。如果您有更多并且想要以不同的方式对待它们，您应该坚持使用@Alberto Jacini 解决方案。
好吧@aProgger，如果您有更多容器并且如果您以不同的方式对待它们，那么显然您做错了什么，而不是使用引导程序的方式。容器只是为了抵消行数，而 bootsrap 只提供一种装订线大小，因此不需要与 bootstrap 为您设置的容器不同的容器。除非您有与引导程序无关的容器，但这与我的回答无关。
@Hrvoje Golcic 也许我理解错了，但是 .container 后跟 .container-fluid 后跟 .container 有什么问题？我不是说要嵌套它们。
@aProgger 这没有什么问题，但如果你使用 .container-fluid 那么你没有在这个主题中解决任何问题，你不需要把 width:100% 因为这个一个在所有视口中已经是 100%

【解决方案5】：

如果使用 Angular，您可以将 ngClass 与三元一起使用，并且如果 window 小于 lg 的像素断点，则函数返回 true？

main.component.html：

<div [ngClass]="isFluid() ? 'container-fluid' : 'container'">
      --your content--
</div>

main.component.ts：

isFluid() {
    return $(window).width() < 960;
}

【讨论】：