twitter-bootstrap 容器中的 Twitter Bootstrap 内容未居中
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21044400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap content in container not centered
提问by Anders
I'm using Twitter Bootstrap for a site. I'm trying to get the content centered. Traditionally I would simple create a custom .containerclass that looks like this:
我正在为一个网站使用 Twitter Bootstrap。我试图让内容居中。传统上,我会简单地创建一个如下所示的自定义.container类:
.container {
width: 70%;
max-width: 1024px;
margin: 0 auto;
}
I've tried to override this class manually, but only the width seems to make a difference. I place the content inside the container like this:
我试图手动覆盖这个类,但似乎只有宽度有所不同。我将内容放在容器中,如下所示:
<div class="container>
<div ng-view></div>
</div>
The container itself is centered. But the content inside seems to have a left margin/padding. Any ideas on how I should structure my divs?
容器本身是居中的。但是里面的内容似乎有左边距/填充。关于我应该如何构建我的 div 的任何想法?
UpdateI use Bootstrap v3.0.3
更新我使用Bootstrap v3.0.3
采纳答案by MackieeE
I'd stick with the scaffolding here if I were you, which keeps it responsive, clean & inline with the rest of the expected Bootstrap HTML. I'll demonstrate an Bootstrap 3.0.0 example below (As you haven't mentioned an version number)
如果我是你,我会坚持使用脚手架,这使它保持响应性、干净且与预期的 Bootstrap HTML 的其余部分保持一致。我将在下面演示 Bootstrap 3.0.0 示例(因为您没有提到版本号)
<div class="container">
<div class="row">
<div ng-view class="col-xs-2"></div>
<div ng-view class="col-xs-8 content">Centre</div>
<div ng-view class="col-xs-2"></div>
</div>
</div>
回答by Brendan
I just ran into a similar issue and solved it by changing:
我刚刚遇到了类似的问题并通过更改解决了它:
<div ng-view></div>
to:
到:
<ng-view></ng-view>
and all of a sudden everything started behaving as I expected. Not sure why using the element ng-view rather than the attribute ng-view helped, but it did!
突然之间,一切都开始按照我的预期进行。不知道为什么使用元素 ng-view 而不是属性 ng-view 有帮助,但确实如此!
回答by Abhisek Mishra
Try this:
试试这个:
.container
{
width: 0%;
max-width: 1024px;
margin: 0 auto;
text-align: center;
}
回答by daveyfaherty
Have you tried anything like:
你有没有尝试过类似的事情:
.container > div{
padding-left: 0;
margin-left: 0;
}

