Bootstrap xs、sm 的容器流体

Question

我希望我最外层的 div 容器对于 md 和 lg 只是 "container"，但是对于 xs 和 sm 是容器流体。我可以在本地实现吗？我需要一些额外的 CSS 吗？

谢谢。

Answer 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

Answer 2

和Bootstrap4
普通 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

Answer 3

As noted, this is solution for Bootstrap 4

问题

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

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

解决方案

如果您自己从 SCSS 编译 Bootstrap，那么您可以通过删除 sm 断点的 max-width 来简单地覆盖变量 $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 那么您肯定会想要编译。您将在那里找到全新的魔法水平。

Answer 4

如果使用 Angular，您可以将 ngClass 与三元一起使用，并具有函数 return 如果 window 小于 lg 的像素断点，则为真？

main.component.html:

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

main.component.ts:

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

Answer 5

Bootstrap 4(.4) 本身就有：

.container, which sets a max-width at each responsive breakpoint

.container-fluid, which is width: 100% at all breakpoints

.container-{breakpoint}, which is width: 100% until the specified

因此，对于您的情况，您可以设置：

<div class="container-md">

为 xs 和 sm（流体）实现 100% 宽度的容器，以及高于它的部分宽度

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

Bootstrap xs、sm 的容器流体

Bootstrap Container Fluid for xs, sm

twitter-bootstrap

bootstrap-4

问题

解决方案