Question

我尝试了所有组合：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

或

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

更改了跨度和偏移数字......

但是我无法将一个简单的盒子完美地放在页面上:(

我只想要一个6列宽的盒子居中......

<小时/> 编辑：

用

做到了

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

但是盒子太宽了，有什么方法可以用span7做到吗？

span7 offset2为左侧span7 offset3额外填充提供了额外的填充...

Answer 1

Bootstrap的跨度浮动到左侧。将它们居中所需的只是覆盖此行为。我这样做是通过将其添加到我的样式表中来的：

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

如果你定义了这个类，只需将它添加到跨度中就可以了。

<div class="span7 center"> box </div>

请注意，必须在引导程序css之后定义此自定义中心类。您可以使用!important，但不建议这样做。

Answer 2

除了将div本身缩小到你想要的大小之外，还可以减少跨度大小... class="span6 offset3"，class="span4 offset4"等......就像style="text-align: center"一样简单div可以产生你正在寻找的效果

你不能将span7与任何设置的偏移量一起使用，并在页面上居中（因为总跨度= 12）

Answer 3

Bootstrap3具有您可以使用的.center-block类。它被定义为

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

文档here。

Answer 4

如果你想要完全自举（而不是自动左/右方式），你需要一个适合12列的模式，例如： 2个空白，8个内容，2个空白。这就是这个设置会做的事情。它只涵盖 -md - 变体，我倾向于通过添加col-xs-12

将其捕捉到小尺寸

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 5

听起来你只想对齐一个容器。引导框架可能过于复杂，例如，你可能只有一个带有自己样式的独立div，如：

<div class="login-container">
  <!-- Your Login Form -->
</div>

和风格：

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

如果你嵌套在bootstrap .container div中的某个地方，这应该可以正常工作。

Answer 6

添加class centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

Answer 7

@ZuhaibAli代码对我有用，但我稍微改了一下：

我在css中创建了一个新类

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

然后div成为

<div class="center col-md-6"></div>

我为div本身的宽度添加了col-md-6，在这种情况下意味着div是大小的一半，在bootstrap中有1 -12 colmd。

Answer 8

使用virtual

Answer 9

将div与类row合并到父div中，然后将样式margin:0 auto;添加到div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>