Twitter bootstrap 在引导3中对齐2个列表组时出现间隙

我正试图将业务1,2个箱子放在同一排，放在我们所做的事情下面。。 另外，我想摆脱Bootstrap3增加的讨厌的右间隙。 我尝试了许多方法，但目前没有一种有效。 我的密码笔： HTML代码：

![<div class="slide1">
          <div class="container">
             <div class="row">
               <div class="col-md-6 col-md-offset-3">
                <div class="page-header">
                 <h2 class="skills " style="font-family: Arial">What we do</h2>
                </div> 
               </div> 
             </div>
           </div>
         </div><!--end slide1 --> 
         <article class="container">
            <div class="row" id="boxes">
             <section class="col-sm-6" id="first-section">
              <div class="list-group" id="business1">
                  <a href="#" class="list-group-item active">
                      Business1
                  </a>
                  <a href="#" class="list-group-item">Construction</a>
                  <a href="#" class="list-group-item">Design</a>
                  <a href="#" class="list-group-item">Etc</a>
              </div> 
             </section>
             <section class="col-sm-6" id="second-section">
               <div class="list-group" id="business2">
                  <a href="#" class="list-group-item active">
                     Business2
                  </a>
                  <a href="#" class="list-group-item">Planning</a>
                  <a href="#" class="list-group-item">Outsourcing</a>
                  <a href="#" class="list-group-item">Hr</a>
              </div>
            </section>
          </div><!--end row-->
        </article>][1]



  CSS:
    #boxes{margin:0 auto;}
    #business1{width: 250px;}
    #business2{width:250px;}

！[
我们所做的
][1]
CSS:
#框{边距：0自动；}
#业务1{宽度：250px；}
#业务2{宽度：250px；}

只需添加

文本中心

类

Bootply：

      <div class="container">
         <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">   <!-- HERE -->
            <div class="page-header">
             <h2 class="skills " style="font-family: Arial">What we do</h2>
            </div> 
           </div> 
         </div>
       </div>

.list-group{
     width:150px;
     margin-left: auto;
     margin-right: auto;
  }

HTML：

      <div class="container">
         <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">   <!-- HERE -->
            <div class="page-header">
             <h2 class="skills " style="font-family: Arial">What we do</h2>
            </div> 
           </div> 
         </div>
       </div>

.list-group{
     width:150px;
     margin-left: auto;
     margin-right: auto;
  }

再次更新：

      <div class="container">
         <div class="row">
           <div class="col-md-6 col-md-offset-3 text-center">   <!-- HERE -->
            <div class="page-header">
             <h2 class="skills " style="font-family: Arial">What we do</h2>
            </div> 
           </div> 
         </div>
       </div>

.list-group{
     width:150px;
     margin-left: auto;
     margin-right: auto;
  }

只要把col-6换成你想要的

例如：col-3：

---

Bootply：

。列表组{margin:auto；}？？？问题是当我将宽度添加到box1,2时。我不想拉伸整行的宽度，我希望它们变小。当我增加宽度时，框会失去对齐。我希望每个框都有200像素。当我这样做时，两个框都会失去对齐。有没有办法在两个框之间删除一些空间，因为这是一个很大的空白？@Lucas别忘了关闭主题当你确信答案有效时，接受答案。。。