用于xs,sm的Bootstrap容器流体

Question

我希望我最外面的div容器只是md和lg的"容器",但xs和sm的容器流体.我可以原生这样做吗？我需要一些额外的CSS吗？

谢谢.

Answer 1

使用Bootstrap 4
Plain css:

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

如果你使用Sass:

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

Answer 2

在container与container-fluid上相同的xs,因为他们都是全宽断点.要覆盖sm断点的宽度,您可以执行此操作.

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

在container和container-fluid自举4相同的方式工作.

这里是！Bootstrap 4.4 有您需要的 ``.container-md``` 类。容器在 768px 以下是流动的，并且在上面有边距。请参阅文档：https://getbootstrap.com/docs/4.4/layout/overview/#containers (9认同)

Answer 3

如上所述,这是Bootstrap 4的解决方案

问题

目前,我们有一个用于xs视口的全宽边对边流体容器.那么我们有固定大小的容器sm,md,lg等.

由于sm视口也被视为小型设备,我们有时也希望在那里使用全宽边对边流体容器,与之相同xs.

如果从SCSS编译引导自己,那么你可以简单地覆盖变量$container-max-widths通过消除max-width对sm断点.这是我推荐的一个干净整洁的解决方案.

在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
);

如果你不自己编译Bootstrap,那么你肯定可能想要.这是你在那里找到的全新魔法水平.