Question

我正在尝试将Business1,2框放在同一行的中心。另外，我想摆脱Bootstrap3添加的令人讨厌的正确差距。我尝试了很多方法，但现在没有人工作过。我的代码：http://cdpn.io/vFILc 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;}

Answer 1

只需添加text-center类

即可

Bootply ：http://www.bootply.com/128932

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>

更新：

Bootply ：http://www.bootply.com/128934

只需添加css ：

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

再次更新：

只需将col-6更改为您想要的内容

例如：col-3：

Bootply ：http://www.bootply.com/128937

在Bootstrap 3中对齐2个列表组时的间隙

1 个答案: