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

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

1 个答案: