CSS - Bootstrap 中心 5 col-md-4

Question

我有 5 col-md-4包裹在容器内，包裹在一排内，包裹在 <section> 内元素。现在，第一行有 3 列，第二行有 2 列。我想做的是将所有 col-md-4 居中元素，以便底部 2 不与左侧对齐，这会在右侧留下空白。这是我的代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="home-features">
  <div class="row">
    <div class="container">

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;">
          <a href="/custom-home/" class="service-link">
            <h3>Custom Homes</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;">
          <a href="/home-renovation" class="service-link">
            <h3>Home Renovations</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;">
          <a href="/luxury-features/" class="service-link">
            <h3>Luxury Features</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;">
          <a href="/project-management/" class="service-link">
            <h3>Project Management</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;">
          <a href="/condo-renovations/" class="service-link">
            <h3>Condo Renovations</h3>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>

Answer 1

在你的底部第一列是

添加 md-offset-2 ,

像这样

 <div class="col-md-4 col-md-offset-2">

不需要第二个底栏。在这里查看:http://codepen.io/ihemant360/pen/XKpXLE