Bootstrap：如何更改容器的宽度？
我用Twitter Bootstrap开发了一个固定的容器类的网站，但现在客户希望网站的宽度是1000px而不是1170px。 我不使用.less文件。
有一个快速的方法来解决这个问题吗？
转到Bootstrap网站上的“自定义”部分，然后select您喜欢的尺寸。 你将不得不设置@gridColumnWidth和@gridGutterWidthvariables。
例如： @gridColumnWidth = 65px和@gridGutterWidth = 20px在@gridGutterWidth = 20px布局上生成结果。
然后下载它。
这是解决scheme：
@media (min-width: 1200px) { .container{ max-width: 970px; } }
与@Bastardo的回答相比，这样做与自定义Bootstrap的优点是，它不会更改Bootstrap文件。 例如，如果使用CDN，您仍然可以从CDN下载大部分Bootstrap。
你正在绑定一个背后说你不会使用LESS文件。 我使用2.0构build了我的第一个Twitter Bootstrap主题，并且我在CSS中做了所有事情 – 创build一个override.css文件。 花了几天才能让事情正常工作。
现在我们有3.0。 让我向你保证，学习LESS所花费的时间更less，如果你对CSS感到满意，那么学习LESS会比做所有疯狂的CSS覆盖更简单。 像你想要的变化是一块蛋糕。
在Bootstrap 3.0中，容器类控制宽度，并调整所有包含的样式以填充容器。 容器宽度variables位于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这样的倍数。
@ mcbjam已经给出了这个答案，但是这里有更多的解释。
您可以轻松地使用CSS文件中的媒体查询进行更改，而无需下载BS。 我只是做了这个，它的作品很漂亮。
媒体查询的“min-width”值将告诉CSS 仅在大于1200px的屏幕上（或者您select包含的宽度）将容器的宽度更改为1000px。 这样可以保持网站的响应能力，所以当屏幕尺寸跳到低于该值时（较小的显示器，平板电脑，智能手机等），您的网站仍然会调整以适应较小的屏幕。
@media (min-width: 1200px) { .container { width: 1000px; } }
使用包装select器并创build一个容器，该容器在该包装器内具有100％的宽度来封装整个页面。
<style>#wrapper {width: 1000px;} #wrapper .container {max-width: 100%; display: block;}</style> <body> <div id="wrapper"> <div class="container"> <div class="row">....
现在最大宽度设置为1000px，你不需要更less或sass。
使用1000px宽度属性设置您自己的内容容器类，然后使用容器stream体 boostrap类而不是容器。
有效，但可能不是最好的解决scheme。
在你的CSS样式中添加这些CSS。 最好添加引导后的CSS文件添加，以覆盖相同的。
html, body { height: 100%; max-width: 100%; overflow-x: hidden; }`
