使用bootstrap将响应式网站居中

Question

我想要的是在我的网站上以左右边框为中心的内容。从代码中获得的东西类型：

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

然而，我正在使用Twitter引导程序，仍然希望保持网站的响应性，并且执行上述操作似乎打破了网格布局。

有人可以告诉我正确的方法吗？

Answer 1

使用span12中提供的.centeredContent{ width: 90%; margin: 0 auto; } 作为根容器，可以立即解决问题，而不会破坏内置的响应能力。

这样的事情 - fluid grid documentation

修改 上面的JSBin试图解决下面的评论。精华是：

CSS：

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

  <!-- your content -->

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

HTML：

{{1}}

Answer 2

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

.container     {     宽度：90％;     margin：0 auto 0 auto;     }

应该给出与以下相同的结果：

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

和

.container     {     宽度：90％;     margin-left：5％;     保证金权利：5％;     }

Answer 3

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

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

如果你在Firebug这个页面上，你会看到主要的容器＆＃39; class只是使用：

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