主容器{

Question

我正在写一个网站，并且正在使用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;
}

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

Answer 1

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

虽然我强烈建议不要这样做，但如果你想阻止你的页面缩放（而不是通过媒体查询主动重新格式化自己），你就会想要操纵元视口标记。

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

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

这应该可以防止任何缩放，但它也会带来迷失方向的体验。有关viewport标记的更多信息，请访问：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

Answer 2

它很容易

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

并在styles.css

中添加

主容器{

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

}

Answer 3

试试这个

<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>

有没有办法在更改浏览器窗口大小时修复Bootstrap容器宽度？

3 个答案:

主容器{