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

我有。psd设计的客户端网站，平面设计师绘制了集装箱宽度高达1920像素，我需要一个帮助如何正确设置集装箱宽度为1920像素

我知道如何设置较小的

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

---

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

或者，在再次阅读您的问题时，您说，“高达1920像素”，那么流体容器？ 然后简单地设置：

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

---

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

.container { width: 1920px !important; }

或者，如果您希望将1920像素容器仅用于更大的显示器，您可以使用如下媒体查询

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

---

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

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

.container.wide {
   width: 1920px;
}

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

然后将类添加到容器

，例如：

.container.wide {
   width: 1920px;
}

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

---

根据你可能想要的反应

.container{
    width: 1920px !important;
}

---

虽然我不明白为什么：）。现在，在每一个较小的分辨率上，它都会滚动。

您可能希望查看bootstrap打包css中的

.container fluid

，而不是强制将容器设置为1920px并覆盖默认引导网格大小

容器

引导需要一个包含元素来包装站点内容并容纳我们的网格系统。您可以从两个容器中选择一个用于项目中。注意，由于填充和其他原因，两个容器都不可嵌套

使用

.container

作为响应的固定宽度容器

<div class="container">
    ...
</div>

---

链接：

您可以利用Bootstrap的容器流体类首先填充整个宽度，然后您可以相应地限制宽度。。。以下是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!
    }
}

---

您可以根据要显示的屏幕大小应用自己的CSS，因为下面的示例将使用比1599px更大的分辨率

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

---

我想在每一刻的宽度容器是1920像素，不到，对不起我的错误。我的显示器分辨率是1200px，但我必须使用1920px，我希望容器的每一刻宽度都是1920px，不能达到，对不起，我的错误。我的显示器分辨率是1200px，但我必须使用1920px，然后您只需要设置：。容器{宽度：1920px}谢谢，就这样。。。但现在我有另一个问题，当我调整浏览器窗口的大小时，它将如何影响响应设计？@MileMijatovićresponsive意味着你正在为不同的宽度大小设置不同的设置。因此，如果您使用.container{width:1920px！important；}，那么这就是所有浏览器宽度的分辨率。如果您想保持响应能力，您必须为不同的浏览器大小定义媒体查询这将始终将container设置为1920px，即使在mobile@VikasKandari正确，但您可以将其包装在媒体查询中—相应地更新答案。wide类不需要将媒体查询规则放在底部，也不需要其他规则，也不需要将css样式表放在引导css之后当宽度超过媒体查询中的最小宽度时，将覆盖容器属性rule@VikasKandari我更喜欢添加我自己的类，这样我就不会直接覆盖引导的类。如果需要的话，这会使恢复核心引导变得更容易。向下投票-即使在移动设备中，这也会将容器设置为1920px

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