twitter-bootstrap Bootstrap 容器宽度变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26947907/
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 width change
提问by Dennis
I'm using Bootstrap for my website and I need to create a container with size of 1250px, but the problem is when I change the class of Bootstrap container the responsiveness won't work anymore.
我正在为我的网站使用 Bootstrap，我需要创建一个大小为 1250px 的容器，但问题是当我更改 Bootstrap 容器的类时，响应性将不再起作用。
What should I do?
我该怎么办？
回答by eroedig
Just setting 'container-fluid' will create a 100% width container. Wrapping the whole thing in a 1250px width container will cause your container not to be responsive. The best thing to do is to assign a 'max-width' to your fluid container, I've included the markup below:
只需设置 'container-fluid' 将创建一个 100% 宽度的容器。将整个内容包装在 1250 像素宽度的容器中会导致您的容器无法响应。最好的办法是为您的流体容器分配一个“最大宽度”，我在下面包含了标记：
<div class="container-fluid" style="background-color:#CDCDCD; max-width:1250px">
Container-Fluid
容器流体
回答by amit2091
You can create a custom container and use it with default container (just overwriting the width). you can change the width according to your need:
您可以创建自定义容器并将其与默认容器一起使用（只需覆盖宽度）。您可以根据需要更改宽度：
CSS :
CSS :
@media (min-width: 768px) {
.my-custom-container{
width:600px;
}}
@media (min-width: 992px) {
.my-custom-container{
width:720px;
}}
@media (min-width: 1200px) {
.my-custom-container{
width:900px;
}}
HTML :
HTML :
<div class="container my-custom-container">
your content Goes here .......
</div>
回答by Minal Telgade
You can give width to container in your css file:
您可以在 css 文件中为容器指定宽度：
.container {
width:1250px;
}
Then write media query for making it responsive:
然后编写媒体查询以使其响应：
@media only screen and
(max-width : 1249px ) {
.container {
width:100%;
}
}
回答by Anubhav pun
You can change the width of container as you like. For this please add these css lines:
您可以根据需要更改容器的宽度。为此，请添加这些 css 行：
.container{
max-width:1250px;
width:100%;
}
回答by Anubhav pun
Did you try fluid container for bootstrap ?
您是否尝试过用于引导程序的流体容器？
Try change 'container' to the 'container-fluid'
尝试将“容器”更改为“容器流体”
It may be help
这可能有帮助
回答by sunilkjt
You can change the width of container as you like.For this please add these css lines
您可以根据需要更改容器的宽度。为此，请添加这些 css 行
@media (min-width: 1200px) {
.container {
width: 1250px !important;
}
}
Thanks
谢谢
回答by Sarower Jahan
Put a special class like my_custom_menuto your menu container. then copy this style below to your stylesheet....
将一个特殊的类添加my_custom_menu到您的菜单容器中。然后将此样式复制到您的样式表中....
@media (min-width: 1200px) {
.container.my_custom_menu {
width: 1250px;
}
}
Thank You
谢谢
