3

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

4

5 回答 5

17

一个更好的方法是

1）创建自己的less文件作为主要的less文件（如 bootstrap.less ）。

2）导入您需要的所有引导程序较少的文件。（在这种情况下，您只需要导入所有响应式较少的文件，但 responsive-1200px-min.less）

3）如果您需要修改原始 bootstrap less 文件中的任何内容，您只需编写自己的 less 以覆盖 bootstrap 的 less 代码。（请记住将您的 less 代码/文件放在 @import {bootstrap's less file}; 之后）。

@media (max-width:1200px) 
@media (min-width: 979px)

第二种方式

使用 .container-fluid

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px; /* or 950px */
}

插入您的自定义 CSS

于 2013-09-03T03:38:15.343 回答
2

尝试这个

.container{
    max-width:980px;
    margin:0 auto;/*make it centered*/
}
于 2013-09-03T03:49:57.763 回答
1

从 variabless.less 中获取以下行，将其放入 app.less 并设置您的值。

@container-tablet: ((720px + @grid-gutter-width));

@container-desktop: ((940px + @grid-gutter-width));

@container-lg-desktop: ((1140px + @grid-gutter-width));

于 2013-10-06T14:33:29.533 回答
-1

这应该可以解决问题

.container{
   max-width:980px !important;
}
于 2013-09-03T11:12:52.013 回答
-2

试试这个代码

/* 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 */
}

在您的代码中使用它，它将真正为您工作。

于 2013-09-03T03:41:55.880 回答