Question

我有客户端网站的.psd设计，平面设计师绘制容器宽度高达1920px，我需要帮助如何正确设置容器宽度到1920px。

我知道如何设置较小的

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

Answer 1

您可能希望查看.container-fluid，而不是将容器强制为1920px并覆盖默认的引导程序网格大小，而.container位于Bootstrap的打包CSS中。

<强>集装箱

Bootstrap需要一个包含元素来包装网站内容并容纳我们的网格系统。您可以选择在您的项目中使用两个容器中的一个。请注意，由于填充等原因，两个容器都不可嵌套。

将<div class="container"> ... </div>用于响应式固定宽度容器。

.container-fluid

将<div class="container-fluid"> ... </div>用于全宽容器，跨越视口的整个宽度。

{{1}}

链接 ：http://getbootstrap.com/css/#overview-container

Answer 2

只需重复使用上面的媒体查询，然后简单地决定何时希望容器更改为该大小（大于1920px）。

   @media (min-width: YOUR VALUE HERE)
    .container {
          width: 1920px;
    }

或者，再次阅读你的问题，你说，＆＃34;高达1920px＆＃34;，所以一个流体容器？然后只需设置：

.container {
      max-width: 1920px;
      width: 100%;
}

Answer 3

您可以利用Bootstrap的 container-fluid 类首先填充整个宽度，然后可以响应地限制宽度...这是Sass中的示例：

.wide-container {
    @extend .container-fluid; // which has max-width: auto; (full)
}

// on medium screens and beyond...
@include media-breakpoint-up(md) {
    .wide-container {
        max-width: 1470px; // limit the width here!
    }
}

Answer 4

你的问题不够明确。但是如果要设置1920px宽的容器，只需使用“！important”覆盖默认容器宽度。像这样，

.container { width: 1920px !important; }

或者如果您希望1920px容器仅用于更大的显示器，您可以使用这样的媒体查询，

@media (min-width: 2400px) {
  .container {
      width: 1920px; 
  }
}

此规则仅适用于宽度至少为2400px的显示器。

Answer 5

您可以按上述答案覆盖BootStrap的默认样式，或者您可以创建一个新类，例如：

.container.wide {
   width: 1920px;
}

然后将类添加到容器<div>中，例如：

<div class="container wide">
    CONTENT
</div>

这确保只有<div>类添加wide类才会生效，这意味着如果需要，您仍然可以使用<div class="container">来获取正常的BootStrap容器行为。

Answer 6

根据您的反应，您可能需要

.container{
    width: 1920px !important;
}

虽然我不明白为什么:)。在每个较小的分辨率上，它将立即滚动。

Answer 7

您可以根据要显示的屏幕尺寸应用自己的CSS，因为以下示例将在大于1599px的分辨率下工作。

@media (min-width: 1600px)
.container {
    max-width: 1500px;
}

需要在Bootstrap中创建更宽的容器 - 1920px

7 个答案: