Question

我有一个div作为内容包装器，我已经集中了。在里面它包含两个div，我想并排出现，但在屏幕的中心。我可以通过将两者都设置为col-md-6来实现这一点，从而给出一个对称的外观，但我只希望它们是4个宽的。

我希望缩小两个div之间的差距。有人可以帮忙吗？

<div class="col-sm-10" style="margin: 0 auto; float: none;">

    <div class="col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
          </div>
        </div>
    </div>

</div>

我尝试过通常的margin: 0 auto;和text-align: center;。

Answer 1

我认为你应该使用bootstrap＆＃39; center-block＆＃39;中的帮助类。然后使用＆＃39; col-xx-offset＆＃39;跳过内部div的开头的网格列。

<div class="col-sm-10 center-block">

<div class="col-md-offset-2 col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

<div class="col-md-4">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
      </div>
      <div class="panel-body">
        Panel content
      </div>
    </div>
</div>

Answer 2

用于居中列：使用 col-md-offset-2

使空间更小：创建一个填充类并覆盖boostrap的默认填充

.pad-left-5{
    padding-left: 5px;
}
.pad-right-5{
    padding-right: 5px;
}

小提琴：http://jsfiddle.net/dh3sQ/

使用Bootstrap连续水平居中两个div

2 个答案: