【问题标题】：Is there a way to fix the Bootstrap container width while changing the browser window size?有没有办法在更改浏览器窗口大小的同时修复 Bootstrap 容器宽度？
【发布时间】：2014-02-11 11:44:41
【问题描述】：

我正在编写一个网站，并且正在使用 Twitter 引导程序的网格系统。我一直在寻找一种方法来修复网站宽度的大小，但没有成功。我的想法是，当用户更改窗口大小或使用 iPhone 等屏幕较小的设备时，我想完全固定大小（根本不允许网络缩小）。更具体地说，我希望浏览器显示我网站的一部分，而不是调整页面大小，这实际上会破坏所有文本格式。下面是我如何设置网站的css。我认为定义最小宽度可以解决问题，但它仍然无法正常工作......

@media (min-width: 1200px) {
    .container{
    max-width: 960px;
    min-width: 960px;
    width: auto !important;
    width: 960;
    }
}

.container {
    padding-left: auto;
    padding-right: auto;
    padding-bottom: 0px;
}

我刚刚阅读了文档，发现引导程序实际上是用于响应式网页设计的。我想知道是否可以使用引导程序修复网站的布局？

【问题讨论】：

标签： html ios css twitter-bootstrap grid

【解决方案1】：

是的，完全可以修复 Bootstrap 构建的宽度。在此处查看文档以获取分步说明：http://getbootstrap.com/getting-started/#disable-responsive

虽然我强烈建议不要这样做，但如果您想防止页面缩放（而不是通过媒体查询主动重新格式化自身），您将需要操作元视口标签。

删除每个 Bootstrap 文档的媒体查询，并将其添加到：

<meta name="viewport" content="width=device-width">

这应该可以防止任何缩放，但也会让人迷失方向。有关视口标签的更多信息：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

【讨论】：

【解决方案2】：

试试这个

<div id="main-container" class="container">
  <div class="row">
    <div class="col-md-12">
        <h1>what ever you want</h1>
    </div>
  </div>
</div>

<style>
#main-container{
  width: 1000px !important
  margin: 0 auto;
  overflow:hidden;
  height:100%;
}
</style>

【讨论】：

谢谢sonill，它现在可以工作了。原来是我的错。我将 nab-bar 设置为合理的，因此网站的菜单部分仍然响应窗口大小，但现在网站的每个元素都是固定的。

【解决方案3】：

很简单

只需将 id 添加到主容器并将其命名为“main-container”

并将其添加到您的 styles.css 中

主容器{

width: 1000px !important;
margin : 0 auto;

}

【讨论】：

嗨 Sonill，这适用于网站的某些 div，但在 div 中也有一些文本，我将它们的类定义为 col-md-xx，在缩放浏览器窗口时仍然会改变它们的内容。