我有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>
答案 0 :(得分：1)
在你的第一列底部是
添加md-offset-2，
<div class="col-md-4 col-md-offset-2">
不需要第二个底栏。点击此处：http://codepen.io/ihemant360/pen/XKpXLE
答案 1 :(得分：0)
<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-2">
</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>
使用上述代码解决您的问题。
答案 2 :(得分：0)
默认情况下，Bootstrap的列是带有css float的样式。您需要使用display: inline-block来覆盖此内容，而text-align: center可能会受到.container.center {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.container.center .col-md-4 {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
text-align: left;
font-size: 14px;
float: none;
}的影响。
<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 center">
<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>[root@testfer-01 ~]# salt-master --version
salt-master 2016.3.1 (Boron)
[root@testfer-01 ~]# time salt '*' test.ping
testfer-02:
True
testfer-03:
True
real 0m5.744s
user 0m0.552s
sys 0m0.123s