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

125

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

是否有解决此问题的快速方法？

twitter-bootstrap

— 亚历克斯
source

请参阅此处的答案，我认为您的问题将通过该答案中的固定小提琴来解决。

— 2013年

@prem，tx，但是我没有得到示例，因为它不使用任何跨度类或容器之类的引导类。我想我对该项目需要的只是使用响应式引导程序将容器的最大值设置为940px。

— alex

75

转到Bootstrap网站上的“自定义”部分，然后选择所需的大小。您必须设置@gridColumnWidth和@gridGutterWidth变量。

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

然后下载。

— 阿尔伯特德维戈
source

通过更改gridColumnWidth和gridGutterWidth变量无法达到精确的1000px容器...因为（12 *（gridColumnWidth）+ 12（gridGutterWidth））不等于1000。所以只有我给出了这个解决方案。那是对的吗？

— 2013年

15

从理论上讲，有匹配1000px的无限组合。例如：12 * 65 + 11 * 20 = 1000（列之间只有11个装订线）。

— albertedevigo 2013年

!！我真的不认识简单的事情……无论如何，您的解决方案是合适的。

— 2013年

感谢您的帖子，它很有帮助;）仅需注意：实际上，将有7种解决方案使用1000px宽度的全像素。（列宽

— 10、21、32、43、54、65

@dfherr我不知道您说“实际”时的确切含义，但是请记住CSS支持像素的十进制值。因此，有无限的解决方案。w3.org/TR/CSS21/syndata.html#length-units

— albertedevigo

228

这是解决方案：

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

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

— 麦克比姆
source

10

大多数答案都忽略了CDN。您的答案是一个完美的解决方案。

— 查尔斯·沃森

2

对于使用CDN的人来说，它是完美的选择。在构建时修改LESS（当4到达时，SASS）对于托管自己的Bootstrap CSS的人们来说是完美的选择。但是，修改提供的自定义LESS（或SASS）后导入的自定义LESS（或SASS）意味着您可以升级基础LESS，而无需（通常）进行比较。

— 格雷格·佩蒂特

2

我知道这确实很晚，但是如果在上面的代码中添加width：auto，那么容器现在会变得更大，则可以使容器大于其最大1170个容器。

— 里克·卡尔德

这就是我想要的。谢谢。

— tedebus

20

您将某人绑起来，说您将不会使用LESS文件。我使用2.0构建了我的第一个Twitter Bootstrap主题，并使用CSS进行了所有工作-创建了overlay.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的倍数。

— 巴斯塔多·苏西奥（Bastardo Sucio）
source

4

作品，但：变量名@container-sm，@container-md和@container-lg（现在）

— 安德烈亚斯·多克

1

@Bastardo好听的名字+1

— 奥马尔的

18

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

您可以使用CSS文件中的媒体查询轻松进行更改，而无需下载BS。我只是这样做，并且效果很好。

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

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

— 杰夫·史瓦汀
source

13

对于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文件中声明了$ container-max-widths，而没有！default。

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

— Kaizoku Gambare
source

12

使用1000px width属性设置您自己的内容容器类，然后使用容器流体 boostrap类代替容器。

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

— 地缘
source

6

使用包装器选择器并创建一个在包装器内部具有100％宽度的容器，以封装整个页面。

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

现在，最大宽度已设置为1000px，您不需要再少了。

— 拉里·贾德（Larry Judd）
source

0

容器尺寸

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

在“容器尺寸”部分中，更改1140为970

希望对您有所帮助。

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

— 所以圣多
source

-3

在CSS样式中添加这些CSS。最好在添加引导css文件后添加此文件以覆盖该文件。

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

— 马亨德拉
source