Question

我正在使用Twitter Bootstrap作为网站。我试图让内容居中。传统上我会简单地创建一个如下所示的自定义.container类：

.container {
  width: 70%;
  max-width: 1024px;
  margin: 0 auto;
}

我试图手动覆盖这个类，但只有宽度似乎有所不同。我将内容放在容器中，如下所示：

<div class="container>
  <div ng-view></div>
</div>

容器本身居中。但内部的内容似乎有左边距/填充。关于如何构建我的div的任何想法？

更新我使用Bootstrap v3.0.3

Answer 1

如果我是你的话，我会坚持使用脚手架，这样可以保持响应，清洁和安全。内联其他预期的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>

Bootply Demo

Answer 2

试试这个：

.container
{
    width: 0%;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}

Answer 3

你有没有尝试过：

.container > div{
  padding-left: 0;
  margin-left: 0;
}

Answer 4

我遇到了类似的问题并通过更改解决了问题：

<div ng-view></div>

为：

<ng-view></ng-view>

突然间，一切都开始按照我的预期行事。不知道为什么使用元素ng-view而不是ng-view属性有帮助，但确实如此！

容器中的Twitter Bootstrap内容不居中

4 个答案: