Question

以这种方式使用代码后：

<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>

我让整个容器超过1100px

Answer 1

更好的方法是

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

2）导入所需的所有bootstrap文件。（在这种情况下，您只需导入所有响应较少的文件，但响应速度为1200px-min.less）

3）如果你需要修改原始bootstrap less文件中的任何内容，你只需要编写自己的内容来覆盖bootstrap的代码。（只需记住在@import {bootstrap的文件少}之后放入较少的代码/文件;）。

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

第二种方式

使用.container-fluid

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

插入自定义css

Answer 2

试试这个

.container{
    max-width:980px;
    margin:0 auto;/*make it centered*/
}

Answer 3

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

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

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

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

Answer 4

这应该可以解决问题

.container{
   max-width:980px !important;
}

Answer 5

试试此代码

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

在您的代码中使用它将真正适合您。

Bootstrap容器最大宽度不起作用

5 个答案: