我一直在尝试这个没有运气。我希望在bootstrap中有5列,每列#34; 2"宽度。我想要偏移第二列,以便有一个" 2"第一列和第二列之间的偏移。我们最终得到的是:
2宽度定价表 - 2宽度空间 - 2宽度定价表 - 2宽度定价表 - 2宽度定价表 - 2宽度定价表。
这是我的代码:http://www.bootply.com/MxnvNuTU6Q
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Bronze
</h3>
</div>
<div class="panel-body">
<h1>
$10<span class="subscript">/mo</span>
</h1>
<small>1 month FREE trial</small>
<table class="table">
<tbody>
<tr>
<td>
1 Account
</td>
</tr>
<tr class="active">
<td>
1 Project
</td>
</tr>
<tr>
<td>
100K API Access
</td>
</tr>
<tr class="active">
<td>
100MB Storage
</td>
</tr>
<tr>
<td>
Custom Cloud Services
</td>
</tr>
<tr class="active">
<td>
Weekly Reports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我做错了什么,col-md-offset2
不是正确的班级?
答案 0 :(得分:2)
col-md-offset2
应该
col-md-offset-2
这应该在第一列和第二列之间创建一个间隙。