Bootstrap列偏移

时间:2014-08-06 10:34:48

标签: html css twitter-bootstrap

我一直在尝试这个没有运气。我希望在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不是正确的班级?

1 个答案:

答案 0 :(得分:2)

col-md-offset2 应该 col-md-offset-2

这应该在第一列和第二列之间创建一个间隙。