パネル本体の中に3列のセンタリング

Question

私は、ブートストラップのグリッドシステムの5/12にまたがる3つの列を含むパネル本体を持っています。私はこれらの列を中心にしようとしていますが、text-centerとcenter-blockを使っても私は成功しませんでした。以下は私のパネル設定（一般化）です。あなたは、例えば、これにあなたが適用できるクラスを与えた場合、<a class="btn btn-primary">をラップdivするため

<div class="col-md-12"> 
<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
     <h3 class="panel-title">Panel Title</h3> 
    </div> 

    <div class="panel-body"> 
     <div class="col-md-2"> 
      <div> 
       <label>Label</label> 
      </div> 
      <div> 
       <select id="id" size="8" style="width: 99%;"> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
       </select> 
      </div> 
      <div> 
       <a class="btn btn-primary">click</a> 
      </div> 
     </div> 
     <div class="col-md-1" style="margin-top: 3%;"> 
      <div> 
       <a class="btn btn-primary"> 
        All →</a> 
      </div> 
      <div> 
       <a class="btn btn-primary"> 
        All ←</a> 
      </div> 
     </div> 
     <div class="col-md-2"> 
      <div> 
       <label>Label</label> 
      </div> 
      <div> 
       <select id="id2" size="8" style="width: 99%"> 
        <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 
              <option> 
         potato 
        </option> 

       </select> 
      </div> 
     </div> 
    </div> 
</div> 

Here is a working example - stripped down but working

Answer 1

.col-xs-5ths, 
 
.col-sm-5ths, 
 
.col-md-5ths, 
 
.col-lg-5ths { 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
} 
 

 
.col-xs-5ths { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .col-sm-5ths { 
 
    width: 20%; 
 
    float: left; 
 
    } 
 
} 
 

 
@media (min-width: 992px) { 
 
    .col-md-5ths { 
 
    width: 20%; 
 
    float: left; 
 
    } 
 
} 
 

 
@media (min-width: 1200px) { 
 
    .col-lg-5ths { 
 
    width: 20%; 
 
    float: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading text-center"> 
 
      <h3 class="panel-title">Panel Title</h3> 
 
     </div> 
 

 
     <div class="panel-body bodyy"> 
 
      <div class="col-md-5ths"></div> 
 
      <div class="col-md-5ths"> 
 
      <div> 
 
       <label>Label</label> 
 
      </div> 
 
      <div> 
 
       <select id="id" size="8" style="width: 99%;"> 
 
       <option ng-repeat="thing in things"> 
 
        {{thing}} 
 
       </option> 
 
       </select> 
 
      </div> 
 
      <div> 
 
       <a class="btn btn-primary" ng-click="click()">click</a> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-5ths text-center" style="margin-top: 3%;"> 
 
      <div> 
 
       <a class="btn btn-primary" 
 
       ng-click="click('woo')"> 
 
       All &rarr;</a> 
 
      </div> 
 
      <div> 
 
       <a class="btn btn-primary" 
 
       ng-click="clicky('wooo')"> 
 
       All &larr;</a> 
 
      </div> 
 
      </div> 
 
      <div class="col-md-5ths"> 
 
      <div> 
 
       <label>Label</label> 
 
      </div> 
 
      <div> 
 
       <select id="id2" size="8" style="width: 99%"> 
 
       <option ng-repeat="stuff in stuffs"> 
 
        {{stuff}} 
 
       </option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ブートストラップの最新のCSSを追加する必要があり、ブートストラップCSSファイルを追加していた場合、それは私の最後に、ここで正常に動作する必要があります。今すぐ更新されたアンサーチェック、またはFiddle

Answer 2

margin-left: -7px;

テストツールで修正されました。