html - 使用 Bootstrap 将两列居中

Question

我想知道如何使用 bootstrap 将页面的两个列居中。我的意思是我有这个:

<header>
  ....
</header>
<section id="main" role="main">
  <div class="container">
    <div class="row">
       <div class="col-sm-7">
          <div class="main-wrap">
             ....
          </div>
       </div>
       <aside class="col-sm-3">
          ....
        </aside>   
    </div>
  </div>
</section>

我想将 <section>...</section> 居中在标题下。

这是 Jsfiddle .因此，包含图像和搜索表单(左侧和右侧)的主要部分必须以标题为中心。可能吗？

Answer 1

Bootstrap 内置了类来偏移网格上的列。

http://getbootstrap.com/css/#grid-offsetting

col-sm-offset-1

JSFiddle: http://jsfiddle.net/706bcaxn/8/