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

我已经使用Twitter Bootstrap开发了一个固定容器类的网站，但现在客户希望网站的宽度为1000px，而不是1170px。我不使用.less文件。Bootstrap：如何更改容器的宽度？

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

2013-04-08 alex

参考答案[这里]（http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it- all-fit-t），我认为你的问题将在答案中由[Fixed-only fiddle]（http://jsfiddle.net/eterpstra/ZR4zz/3/）解决。 – prem 2013-04-08 16:39:15

@prem，tx但我没有得到这个例子，因为它没有使用像span或container这样的引导类。所有我认为我需要这个项目的方法是使用响应式引导将容器的最大值设置为940像素。 – alex 2013-04-08 17:59:15

你修好了吗？ – prem 2013-04-11 04:13:22

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

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

然后下载它。

来源

2013-06-14 11:07:38 albertedevigo

通过更改gridColumnWidth和gridGutterWidth变量...因为（12 *（gridColumnWidth）+ 12（gridGutterWidth））不等于1000，所以无法达到精确的1000px容器。所以只有我给出了该解决方案。那是对的吗？ – prem 2013-06-14 12:40:10

+12

理论上，有无限组合匹配1000px。例如：12 * 65 + 11 * 20 = 1000（列之间只有11个排水沟）。 – albertedevigo 2013-06-14 14:09:59

呵呵！我真的不知道这件简单的事情......反正你的是最合适的解决方案。 – prem 2013-06-14 14:18:14

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

现在我们有3.0。让我向你保证，学习LESS需要的时间更少，如果你对CSS感到满意，那么学习LESS会比做所有疯狂的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

来源

2013-10-25 17:26:23

工作，但：变量名称是'@容器sm'，'@容器md'和'@容器lg'（现在） – 2015-04-01 12:00:00

@巴斯塔纳好名字+1 – 2017-07-28 04:35:21

124

这里多是解决方案：

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

这样做，对定制引导作为@Bastardo's答案的优势在于，它不” t更改Bootstrap文件。例如，如果使用CDN，您仍然可以从CDN下载大部分Bootstrap。

来源

2015-02-03 02:47:52 mcbjam

大多数答案忽略CDN。您的答案是完美的解决方案。 – 2015-08-13 18:29:45

它非常适合使用CDN的人。在构建时修改LESS（当4到达时，SASS）对于托管自己的Bootstrap CSS的人来说是完美的。但是，修改在提供的LESS（或SASS）之后导入的自定义LESS（或SASS）意味着您可以不进行（通常）差异式升级底层的LESS。 – 2015-08-25 18:03:14

我知道这真的很晚，但是如果您将宽度：自动添加到上面的代码，您可以使容器的容量比它们的最大值更大。 – 2016-06-24 09:44:08

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

工程，但可能不是最好的解决方案。

来源

2015-02-27 10:33:01 Geo

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

您可以轻松地使用CSS文件中的媒体查询进行更改，无需下载BS。我只是做到了这一点，它的作品非常漂亮。

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

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

来源

2015-04-07 16:41:13

使用包装选择器并创建一个在该包装器内部具有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。

来源

2015-11-15 06:37:23

在你的CSS样式中添加这些CSS。添加引导程序css文件后，为了覆盖它，最好添加它。

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

来源

2016-04-23 12:43:20 Mahendra

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

回答

相关问题