Question

我在导航栏，正文和页脚中使用.container类。

所以这三个在左边很好地对齐。但是，我想增加container类的宽度。

默认宽度为1170：

media="screen, projection"
bundle-bundle_bootstrap_head.css:6139@media (min-width: 1200px)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

但是，我想将宽度扩展到1300.所以我在main.css

中添加了以下内容

.container {
    width: 1200px;
}

但这似乎不起作用。当我重新加载页面并检查CSS时，1200被划掉并且1170仍处于活动状态。

问题

如何在bootstrap中扩展container类的默认宽度？

Answer 1

可能是因为您正在加载或main.css（bootstrap.css），并在那里进行更改。然后你可能会在此之后调用bootstrap-responsive.css并覆盖你的更改。

1170px .container宽度来自bootstrap-responsive.css文件。它是默认情况下分配给大显示屏幕（1200px和更宽）的宽度。这就是为什么我假设您在bootstrap-responsive.css文件后调用main.css。

在这方面，使用!important是一种反模式（一种不良做法）。特别是与.container一样通用的东西。这将导致未来的特异性问题。我鼓励你实际修复和理解问题，而不是“黑客攻击”。

Answer 2

试试这个

！important可以在级联样式表中使用以优先考虑参数

.container {
   width: 1200px !important;
 }

查看this了解详情。

对于这种情况！important可以用作解决方法，但使用此属性是被认为是一种不好的做法，并不是CSS专家推荐的。

Answer 3

我知道这是一个旧线程，但是我最近正在搜索如何在最新版本的bootstrap（3.0）上扩展容器宽度，并认为这可能有助于其他人。

除了设置容器的宽度之外，还必须为css设置max-width属性。

container 
{
  width:1200px;
  max-width:1200px;
}

正如其他人在上面提到的那样，请确保在bootstrap.css文件之后加载自定义css，以便重新声明设置。

Answer 4

以防万一，您正在使用引导scss。

文件：_variables.scss

为更大的容器宽度添加断点（此处为xxl：1440px）。

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px
) !default;

只需添加xxl，即可创建更大的容器：1200px

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1200px
) !default;

Bootstrap mixins将为1200px宽的容器创建额外的断点媒体查询。

有关更改引导程序变量的更多信息，请转到Theming Bootstrap

如何在Twitter Bootstrap中扩展容器的宽度

4 个答案: