html - 根据我的需要调整 bootstrap3 网格大小

Question

我必须制作一个非常简单的响应式网站，想使用 Bootstrap 3。第一次玩...

所有内容的最大宽度为960px，非常简单，只有标题(960px)、主界面(630px)和侧边栏(320px)，两者之间的间距为10px。

当我们在小型设备上时，侧边栏应该堆叠在主界面下。

所以，我知道 Bootstrap3 接受 12 个网格，每个网格最大 70px + 最大 30px 间距(划分每个网格)。

如果我应用下面的代码...

 <div class="container">
  <div class="row">
    <div class="col-sm-12">
        <h1>my Header, should be 960px</h1>            
    </div>
  </div>

    <div class="row">
      <div class="col-sm-8 ">This should be 630px</div>
      <div class="col-sm-4 col-xs-12">This should be 320px</div>
    </div>
  </div>

当然，我在桌面设备上的所有内容(8+4=12 个网格)中总是得到 1170 像素。

如何使内容宽度为 960px？

Answer 1

将行包裹在固定宽度的容器中，例如..

.container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

row 和 col-* 仍将在固定宽度的容器内以响应方式工作。

这是一个工作演示:http://bootply.com/96043