Html 如何设置流体 Bootstrap 容器的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18964366/
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
How can I set the width of fluid Bootstrap containers?
提问by cameraobscura
I just want to clear out one thing. If I am using "container-fluid"class, it means I can not have something like this in bootstrap.css:
我只想澄清一件事。如果我正在使用"container-fluid"类，这意味着我不能在 bootstrap.css 中有这样的东西：
.container-fluid{
width: 1170px;
}
I tried to set in pixels and the responsive nature simply switched off. While setting in % it works. In other words, my question is like this: How can I set the fixed width of container-fluid? Or was it simply not meant by default by bootstrap developers?
我试图以像素为单位进行设置，响应性只是关闭了。在 % 中设置时它有效。换句话说，我的问题是这样的：如何设置container-fluid的固定宽度？或者引导程序开发人员默认情况下并不意味着它？
I already read this link: Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
我已经阅读了这个链接： 流体或固定网格系统，在响应式设计中，基于 Twitter Bootstrap
But simply can not find anything there regarding the responsive nature and fixed width with container-fluid.
但根本找不到任何关于响应性质和固定宽度的内容 container-fluid.
回答by Patrick Evans
setting a pxwidth is making it static, you would have to employ a different technique to make it responsive after that like javascriptthat is why a % is used.
设置px宽度使其成为静态，您将不得不采用不同的技术使其具有响应性，javascript这就是使用 % 的原因。
If you are wanting to make the container not go wider than 1170pxuse
如果您想让容器的宽度不超过1170px使用范围
.container-fluid {
max-width:1170px;
}
max-width will make it so if the users screen is wider than 1170pxthe container will go only up to 1170pxwide. This will make it so the responsive mechanisms will still work.
max-width 将使它如此，如果用户屏幕比1170px容器更宽，则只会增加1170px宽度。这将使响应机制仍然有效。
Of course using .container-fluidas the selector will change how all container-fluidelements act so think about adding a second class to that element and setting the style to it.
当然，使用.container-fluidas 选择器会改变所有container-fluid元素的行为方式，所以考虑向该元素添加第二个类并为其设置样式。
html
html
<div class="container-fluid maxWidth"></div>
css
css
.maxWidth {
max-width:1170px;
}
If you are wanting the container to be fixed no matter what, that will make the contents inside non-responsive as they would not be able to tell when the screen has changed size as the container would not change size.
如果您无论如何都希望容器被修复，这将使里面的内容无响应，因为它们无法判断屏幕何时改变大小，因为容器不会改变大小。
