0

我.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 仍然处于活动状态。

问题

如何container在引导程序中扩展类的默认宽度？

4

4 回答 4

1

这可能是因为您正在加载或main.css( bootstrap.css)，并在那里进行更改。然后你可能会bootstrap-responsive.css在那之后打电话，它会覆盖你的更改。

1170px.container宽度来自bootstrap-responsive.css文件。它是默认分配给大显示屏幕（1200 像素和更宽）的宽度。这就是为什么我假设你bootstrap-responsive.css在你的main.css文件之后打电话。

在这方面，使用!important是一种反模式（一种不好的做法）。尤其是在像您的.container. 这将导致未来的特异性问题。我鼓励您实际解决和理解问题，而不是“破解它”。

于 2013-03-25T17:07:45.427 回答
0

尝试这个

!important 可用于级联样式表以优先考虑参数

.container {
   width: 1200px !important;
 }

检查此以获取更多信息。

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

于 2013-03-25T16:55:56.203 回答
0

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

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

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

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

于 2014-09-26T13:58:13.977 回答
0

如果您使用的是引导程序 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 宽的容器创建额外的断点媒体查询。

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

于 2020-02-29T12:02:13.477 回答