我想要的是在我的网站上具有左右边框的居中内容。您从代码中获得的东西类型:
.container {
width: 90%;
margin: 0 auto;
}
但是我正在使用 twitter bootstrap 并且仍然希望保持网站响应,并且执行上述操作似乎破坏了网格布局。
谁能告诉我正确的方法来做这件事?
我想要的是在我的网站上具有左右边框的居中内容。您从代码中获得的东西类型:
.container {
width: 90%;
margin: 0 auto;
}
但是我正在使用 twitter bootstrap 并且仍然希望保持网站响应,并且执行上述操作似乎破坏了网格布局。
谁能告诉我正确的方法来做这件事?
使用流体网格文档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 -->
此页面是 Bootstrap 示例页面之一,它也是响应式的:
http://twitter.github.com/bootstrap/examples/hero.html
如果你 Firebug 这个页面,你会看到主要的“容器”类只是在使用:
.container {
margin-left: auto;
margin-right: auto;
}
我没有使用 twitter,但是使用带边距的 css 在 html 中居中对象的标准方法如下:
.container { 宽度:90%; 边距:0 自动 0 自动;}
这应该给出相同的结果:
.container { 宽度:90%; 保证金:0 5% 0 5%;}
和:
.container { 宽度:90%; 左边距:5%;保证金权利:5%;}