Html Bootstrap 容器最大宽度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18583647/
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 max-width doesn't work
提问by RahulG
After using the code this way:
以这种方式使用代码后：
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<style type="text/css">
.container{
max-width:980px;
}
</style>
</head>
<body>
<div class="container" style="max-width:980px;">
...
</div>
</body>
</html>
I get the whole container going over 1100px
我让整个容器超过 1100 像素
回答by RahulG
A better way to do this is
一个更好的方法是
1)create your own less file as a main less file ( like bootstrap.less ).
1）创建您自己的 less 文件作为主要的 less 文件（如 bootstrap.less ）。
2)Import all bootstrap less files you need. (in this case, you just need to import all responsive less files but responsive-1200px-min.less)
2）导入您需要的所有引导程序较少的文件。（在这种情况下，您只需要导入所有响应较少的文件，但responsive-1200px-min.less）
3)If you need to modify anything in original bootstrap less file, you just need to write your own less to overwrite bootstrap's less code. (Just remember to put your less code/file after @import {bootstrap's less file}; ).
3）如果你需要修改原始bootstrapless文件中的任何内容，你只需要编写自己的less来覆盖bootstrap的less代码。（请记住将您的 less 代码/文件放在 @import {bootstrap's less file}; 之后）。
@media (max-width:1200px)
@media (min-width: 979px)
Second way
第二种方式
use .container-fluid
使用 .container-fluid
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
insert in your custom css
插入您的自定义 css
回答by tomas.satinsky
Take following lines from variabless.less, put it to app.less and set your values.
从 variabless.less 中取出以下几行，将其放入 app.less 并设置您的值。
@container-tablet: ((720px + @grid-gutter-width));
@container-tablet: ((720px + @grid-gutter-width));
@container-desktop: ((940px + @grid-gutter-width));
@container-desktop: ((940px + @grid-gutter-width));
@container-lg-desktop: ((1140px + @grid-gutter-width));
@container-lg-desktop: ((1140px + @grid-gutter-width));
回答by Suresh Pattu
Try this
尝试这个
.container{
max-width:980px;
margin:0 auto;/*make it centered*/
}
回答by Charles Ingalls
This should do the trick
这应该可以解决问题
.container{
max-width:980px !important;
}
回答by Joshua Henn
Try this code
试试这个代码
/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
Use this in your code it will really work for you.
在您的代码中使用它，它真的对您有用。
