Bootstrap：如何更改容器的宽度？答案

【问题标题】：Bootstrap: how do I change the width of the container?Bootstrap：如何更改容器的宽度？
【发布时间】：2013-03-30 19:55:28
【问题描述】：

我使用 Twitter Bootstrap 开发了一个具有固定容器类的网站，但现在客户希望网站宽度为 1000 像素而不是 1170 像素。我不使用 .less 文件。

有没有快速解决这个问题的方法？

【问题讨论】：

参考答案here，我想你的问题会被Fixed-only fiddle在那个答案中解决。
@prem, tx 但我没有得到这个例子，因为它不使用任何引导类，如跨度或容器。我认为这个项目需要的只是使用响应式引导程序将容器的最大值设置为 940px。
@alex 我只是尝试了<div class="container col-12"> ... </div> 并且扩大了容器。这是解决问题的快速方法。

标签： twitter-bootstrap

【解决方案1】：

解决办法如下：

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

与@Bastardo's 答案中自定义 Bootstrap 相比，这样做的好处是它不会更改 Bootstrap 文件。例如，如果使用 CDN，您仍然可以从 CDN 下载大部分 Bootstrap。

【讨论】：

大多数答案都忽略了 CDN。你的答案是一个完美的解决方案。
非常适合使用 CDN 的人。在构建时修改 LESS（当 4 到达时，SASS）对于托管自己的 Bootstrap CSS 的人来说是完美的。但是，修改在提供的 LESS 之后导入的自定义 LESS（或 SASS）意味着您可以升级底层 LESS，而无需（通常）进行差异。
我知道这已经很晚了，但是考虑到容器现在往往更大，如果你在上面的代码中添加 width:auto，你可以使容器大于最大 1170。
这就是我要找的。谢谢。

【解决方案2】：

转到 Bootstrap 网站上的 Customize 部分并选择您喜欢的尺寸。您必须设置 @gridColumnWidth 和 @gridGutterWidth 变量。

例如：@gridColumnWidth = 65px 和 @gridGutterWidth = 20px 在 1000px 布局上产生结果。

然后下载它。

【讨论】：

通过更改 gridColumnWidth 和 gridGutterWidth 变量无法达到精确的 1000px 容器...因为 (12*(gridColumnWidth) + 12(gridGutterWidth)) 不等于 1000。所以只有我给出了那个解决方案。对吗？
理论上，匹配 1000px 的组合是无限的。示例：12*65 + 11*20 = 1000（列之间只有 11 个装订线）。
嗯！我真的不认识这个简单的事情......无论如何，你的解决方案是合适的。
感谢您的帖子，它很有帮助；）请注意：实际上，对于 1000 像素宽度，使用全像素的解决方案恰好有 7 个。（列宽 10、21、32、43、54、65 和 76）
@dfherr 我不知道您所说的“实际”是什么意思，但请记住 CSS 支持像素的十进制值。因此，有无限的解决方案。 w3.org/TR/CSS21/syndata.html#length-units

【解决方案3】：

你在背后说你不会使用 LESS 文件。我使用 2.0 构建了我的第一个 Twitter Bootstrap 主题，并且我在 CSS 中完成了所有工作——创建了一个 override.css 文件。需要几天的时间才能让事情正常工作。

现在我们有了 3.0。让我向你保证，学习 LESS 所花费的时间比完成所有那些疯狂的 CSS 覆盖所花费的时间要少，如果你对 CSS 感到满意的话，这是非常简单的。做出你想要的改变是小菜一碟。

在 Bootstrap 3.0 中，容器类控制宽度，所有包含的样式都会调整以填充容器。容器宽度变量位于 variables.less 文件的底部。

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

有些网站要么没有足够的内容来填充 1020 显示屏，要么出于美观原因您想要更窄的框架。因为 BS 使用 12 列网格，所以我使用像 960 这样的倍数。

【讨论】：

有效，但是：变量名称为 @container-sm、@container-md 和 @container-lg（现在）

【解决方案4】：

@mcbjam 已经给出了这个答案，但这里有更多解释。

您可以在 CSS 文件中使用媒体查询轻松进行更改，而无需下载 BS。我刚做了这个，效果很好。

媒体查询的“最小宽度”值将告诉 CSS 将容器的宽度更改为 1000 像素仅在大于 1200 像素（或您选择包含的任何宽度）的屏幕上。这会保留您网站的响应能力，因此当屏幕尺寸低于该值（较小的显示器、平板电脑、智能手机等）时，您的网站仍会调整以适应较小的屏幕。

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

【讨论】：

【解决方案5】：

对于 bootstrap 4，如果您使用的是 Sass，这里是要编辑的变量

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

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

为了覆盖这个变量，我在导入引导程序之前在我的 .sass 文件中声明了没有 !default 的 $container-max-widths。

注意：我只需要更改 xl 值，所以我不在乎考虑断点。

【讨论】：

【解决方案6】：

使用 1000px 宽度属性设置您自己的内容容器类，然后使用 container-fluid boostrap 类代替容器。

有效，但可能不是最佳解决方案。

【讨论】：

【解决方案7】：

使用包装器选择器并在该包装器内创建一个宽度为 100% 的容器来封装整个页面。

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

现在最大宽度设置为 1000px，你不需要更少或 sass。

【讨论】：

可以，只需将代码放在容器类 div 中即可。

【解决方案8】：

容器尺寸

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

在容器大小部分，将 1140 更改为 970

希望对你有所帮助。

谢谢你的正确。自定义引导链接：https://getbootstrap.com/docs/3.4/customize/

【讨论】：

【解决方案9】：

只需将容器添加到粘性导航栏；

【讨论】：

【解决方案10】：

在引导程序 4 中，只需将其添加到您的 .CSS 文件中

.container {
   max-width: 70% !important;/*Set your own width %; */
}

【讨论】：

【解决方案11】：

在您的 CSS 样式中添加这些 CSS。最好在添加引导 css 文件后添加它以覆盖相同的内容。

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`

【讨论】：