CSS 需要在 Bootstrap 中创建更宽的容器 - 1920px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33803767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to create wider container in Bootstrap - 1920px
提问by Mile Mijatovi?
I have .psd design for client site, graphic designer drew container width up to 1920px, and I need a help how to properly set up width of container to 1920px.
我有客户端站点的 .psd 设计，图形设计师绘制的容器宽度高达 1920 像素，我需要帮助如何将容器的宽度正确设置为 1920 像素。
I know how to set up smaller
我知道如何设置更小
@media (min-width: 1200px)
.container {
width: 1170px;
}
回答by Kyle Yeo
Instead of forcing your containers to 1920px and overriding the default bootstrap grid sizes, you may want to look at .container-fluid, which is inside Bootstrap's packaged css.
与其强制您的容器为 1920px 并覆盖默认的引导网格大小，您可能需要查看.container-fluidBootstrap 打包的 css 中的 。
Containers
容器
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Bootstrap 需要一个包含元素来包装站点内容并容纳我们的网格系统。您可以选择两个容器之一在您的项目中使用。请注意，由于填充等原因，两个容器都不是可嵌套的。
Use .containerfor a responsive fixed width container.
使用.container一个响应固定宽度的容器。
<div class="container">
...
</div>
Use .container-fluidfor a full width container, spanning the entire width of your viewport.
使用.container-fluid了全宽的容器，跨越视口的整个宽度。
<div class="container-fluid">
...
</div>
回答by JesseEarley
Just reuse the media query you have above, and simply decide when you want the container to change to that size (something greater than 1920px).
只需重用上面的媒体查询，然后决定何时将容器更改为该大小（大于 1920 像素）。
@media (min-width: YOUR VALUE HERE)
.container {
width: 1920px;
}
OR, upon reading your question again, you said, "up to 1920px", so a fluid container? Then simply set:
或者，在再次阅读您的问题时，您说“最多 1920 像素”，所以是流体容器？然后简单地设置：
.container {
max-width: 1920px;
width: 100%;
}
回答by Chathura Buddhika
Your problem is not clear enough. but if you want to set up 1920px wide container, just override the default container width with "!important". like this,
你的问题还不够清楚。但是如果你想设置 1920px 宽的容器，只需用“!important”覆盖默认的容器宽度。像这样，
.container { width: 1920px !important; }
Or if you wish to 1920px container only for larger displays, you can use media query like this,
或者，如果您希望 1920px 容器仅用于较大的显示器，您可以使用这样的媒体查询，
@media (min-width: 2400px) {
.container {
width: 1920px;
}
}
this rule will apply only for displays that is at least 2400px wide.
此规则仅适用于宽度至少为 2400 像素的显示器。
回答by Sky7ure
You could utilize Bootstrap's container-fluidclass to fill the entire width first, then you can restrict the width responsively... Here is an example in Sass:
您可以先使用 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!
}
}
回答by Nadeem
You can apply your own CSS according to the screen size you want to show as the below example will work on a larger resolution size than 1599px.
您可以根据要显示的屏幕尺寸应用自己的 CSS，因为下面的示例适用于比 1599 像素更大的分辨率尺寸。
@media (min-width: 1600px)
.container {
max-width: 1500px;
}
回答by David Wilkinson
You could override BootStrap's default styling as the answers above describe, or you could create a new class such as:
您可以按照上述答案的描述覆盖 BootStrap 的默认样式，或者您可以创建一个新类，例如：
.container.wide {
width: 1920px;
}
Then add the class to the container <div>'s such as:
然后将类添加到容器中<div>，例如：
<div class="container wide">
CONTENT
</div>
This ensures only the <div>'s you add the wideclass to are effected, meaning you're still free to use <div class="container">for normal BootStrap container behavior if required.
这确保只有<div>您添加wide类的's受到影响，这意味着如果需要，您仍然可以自由地<div class="container">用于正常的 BootStrap 容器行为。
EDIT
编辑
As Vikas has said in his comment, the above style would apply also on mobile. In this case, just wrap in a media query as follows:
正如 Vikas 在评论中所说，上述风格也适用于移动设备。在这种情况下，只需按如下方式包装媒体查询：
@media (min-width: 1950px) {
.container.wide { width: 1920px; }
}
回答by okolimar
Based on your reactions you probably want
根据您可能想要的反应
.container{
width: 1920px !important;
}
though I don't understand why :). On every smaller resolution it will scroll now.
虽然我不明白为什么:)。在每个较小的分辨率下，它现在都会滚动。
