以引导响应列为中心

Question

我正在寻找将一组响应式引导列集中在一行内的最佳方法。

     <li class="row hazRow">
         //center this to the middle of the row
         <div class="col-xs-3">
             <img class="icon" href="#" title="icon" src="img/table/icon.svg">
         </div>
         <div class="col-xs-4">
             <p>Title</p>
         </div>
         //end center
     </li>

我想在任何一侧只使用空白col，但感觉像是浪费，并且无法像7那样将奇数列宽度居中。

我还尝试用.center-block和.text-center类将div包装在div中，但这并没有改变位置。

• 我应该放弃响应式bootstrap网格吗？
• 如何将这些列居中？

Answer 1

这是我们使用嵌套的row和col类的地方......

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

对于奇数列:(如果您需要9个列）

<div class="row">
   <div class="col-md-10 col-md-offset-1">
       <div class="row">
           <div class="col-md-4 col-md-offset-1"></div>
           <div class="col-md-6"></div>
       </div>
   </div>
</div>

这将为您提供大约9列宽。