css - 使用引导程序将响应式网站居中

Question

我想要的是在我的网站上具有左右边框的居中内容。您从代码中获得的东西类型：

.container {
    width: 90%;
    margin: 0 auto;
}

但是我正在使用 twitter bootstrap 并且仍然希望保持网站响应，并且执行上述操作似乎破坏了网格布局。

谁能告诉我正确的方法来做这件事？

Answer 1

使用流体网格文档span12中给出的，作为根容器将开箱即用地解决它，而不会破坏内置的响应能力。

像这样的东西 - http://jsbin.com/amovub/5/edit

编辑： 更新了上面的 JSBin 以尝试解决下面的评论。本质是：

CSS：

.centeredContent{
  width: 90%;
  margin: 0 auto;
}

HTML：

<div class="span12">
  <div class="centeredContent">

  <!-- your content -->

  </div> <!-- /centeredContent -->
</div> <!-- /span12 -->

Answer 2

此页面是 Bootstrap 示例页面之一，它也是响应式的：

http://twitter.github.com/bootstrap/examples/hero.html

如果你 Firebug 这个页面，你会看到主要的“容器”类只是在使用：

.container {
    margin-left: auto;
    margin-right: auto;
}

Answer 3

我没有使用 twitter，但是使用带边距的 css 在 html 中居中对象的标准方法如下：

.container { 宽度：90%; 边距：0 自动 0 自动；}

这应该给出相同的结果：

.container { 宽度：90%; 保证金：0 5% 0 5%；}

和：

.container { 宽度：90%; 左边距：5%；保证金权利：5％；}