容器中的 Twitter Bootstrap 内容未居中

Posted 2023-03-05

【中文标题】容器中的 Twitter Bootstrap 内容未居中

【英文标题】：Twitter Bootstrap content in container not centered

【发布时间】：2014-01-29 10:20:48

【问题描述】：

我正在为一个网站使用 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

【参考方案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

【讨论】：

v3.0.3 在类名方面应该不会有太大的不同，所以没关系 =)

我已经尝试过你的答案 - 似乎有效，但内容对我来说变得相当狭窄。您对导致这种情况的原因有什么想法吗？

由于您正在使用的屏幕尺寸，bootstrap 使用%，因此它与剩余空间量有关，您可以将col-xs-2 减少到col-xs-1 和col-xs-8 到col-xs-10 增加内容大小

【参考方案2】：

你有没有尝试过：

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

【参考方案3】：

试试这个：

.container

    width: 0%;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;

【参考方案4】：

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

<div ng-view></div>

到：

<ng-view></ng-view>

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