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

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 'center-block' 中的辅助类，然后使用 'col-xx-offset' 跳过内部 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>