twitter-bootstrap 用于 xs、sm 的 Bootstrap Container Fluid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35991441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Container Fluid for xs, sm
提问by user3449833
I'd like my outer-most div container to be just "container" for md and lg, but container-fluid for xs and sm. Can I achieve this natively? Do I need some additonal CSS?
我希望我最外面的 div 容器只是 md 和 lg 的“容器”，但 xs 和 sm 的容器流体。我可以在本地实现这一目标吗？我需要一些额外的 CSS 吗？
Thanks.
谢谢。
回答by Alberto Jacini
With Bootstrap 4
Plain css:
使用 Bootstrap 4
纯 css：
@media (max-width: 768px) {
.container {
width: 100%;
max-width: none;
}
}
If you use Sass:
如果你使用 Sass：
@include media-breakpoint-down(md) {
.container {
width: 100%;
max-width: none;
}
}
回答by Zim
The containerand container-fluidare identical on the xsbreakpoint since they're both full width. To override the width for the smbreakpoint you could do this..
在container与container-fluid上相同的xs，因为他们都是全宽断点。要覆盖sm断点的宽度，您可以这样做..
@media (max-width: 992px) {
.container {
width: 100%;
}
}
Demo: http://codeply.com/go/dHFw0LcVPl
演示：http: //codeply.com/go/dHFw0LcVPl
The containerand container-fluidwork the same way in Bootstrap 4.
在container和container-fluid自举4相同的方式工作。
回答by Hrvoje Golcic
As noted, this is solution for Bootstrap 4
如前所述，这是 Bootstrap 4 的解决方案
The Issue
问题
Currently we have a full-width edge-to-edge fluid container for xsviewport. Then we have fixed size containers for sm, md, lgetc.
目前，我们有一个用于xs视口的全宽边到边流体容器。那么我们有固定大小的容器sm，md，lg等。
As smviewport is also considered as a small device sometimes we would want to have full-width edge-to-edge fluid container there too, the same as for xs.
由于sm视口也被认为是一个小设备，有时我们也希望在那里有全宽的边到边流体容器，与xs.
The Solution
解决方案
If you compile Bootstrap from SCSS by yourself then you can simply override the variable $container-max-widthsby removing max-widthfor smbreakpoint. This is a neat and clean solutionI would recommend.
如果从SCSS编译引导自己，那么你可以简单地覆盖变量$container-max-widths通过消除max-width对sm断点。这是我推荐的整洁干净的解决方案。
Find in the Bootstrap source code (vendor) _variables.scss:
在 Bootstrap 源代码（供应商）中找到_variables.scss：
$container-max-widths: (
sm: 540px, // <-- we are going to remove this line
md: 720px,
lg: 960px,
xl: 1140px
) !default;
Copy into your custom file and override by removing smdefinition row and removing !defaultkeyword e.g. in _my-variables.scssfile:
复制到您的自定义文件并通过删除sm定义行和删除!default关键字（例如_my-variables.scss文件中的关键字）来覆盖：
$container-max-widths: (
md: 720px,
lg: 960px,
xl: 1140px
);
Learn more about Theming Bootstrap with your own SCSS variables.
使用您自己的 SCSS 变量了解有关主题化 Bootstrap 的更多信息。
If you do not compile Bootstrap by yourself then you definitively might want to. It's the whole new level of magic you'll find there.
如果您不自己编译 Bootstrap，那么您绝对可能想要。这是您将在那里找到的全新水平的魔法。
回答by Archie Archbold
If using Angular you can use ngClass with a ternary and have a function return true if window is less that the pixel breakpoint for lg?
如果使用 Angular，您可以将 ngClass 与三元一起使用，并且如果窗口小于 lg 的像素断点，则函数返回 true？
main.component.html:
main.component.html：
<div [ngClass]="isFluid() ? 'container-fluid' : 'container'">
--your content--
</div>
main.component.ts:
main.component.ts:
isFluid() {
return $(window).width() < 960;
}
