Question

我刚开始使用Bootstrap 3。我用width: 960px;制作了一个12个容器的容器。然后我注意到容器大小已更改为width: 1110px。谁能告诉我这是什么问题？我只想要一个宽度为960px的固定容器;

请检查here

我找到了css：

.col-lg-12 {
    margin-left: 0;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

Answer 1

从bootstrap.css

修改此CSS属性

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media (min-width: 768px) {
    .container {
      width: 732px; } }
  @media (min-width: 992px) {
    .container {
      width: 952px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1152px; } }

删除

@media (min-width: 1200px) { .container { width: 1152px; }

更新

@media (min-width: 990px) { .container { width: 950px; } }

如果在应用此代码时出现任何问题，请在下方发表评论

Answer 2

值得注意的是：如果您使用Bootstrap less 或 sass ，更改容器的大小就像更改一个变量一样简单。在Bootstrap 3（准确地说是3.3.5）中，variables.less文件中的容器设置如下所示：

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                 @container-large-desktop;

（见bootstrap's github repo）

因此，为了适应大屏幕.container的大小，只需将变量@container-large-desktop添加到您自己的variables.less文件中即可覆盖{<1}}：

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

（默认情况下@grid-gutter-witdh设置为30px，因此以上将导致拥有960px容器）

bootstrap 3容器大小

2 个答案: