2016-08-26 11 views
3

I need to center this checkboxes このチェックボックスの中央に誰かが私を助けることができますか?私はすでにたくさんのことをしようとしています。ここブートストラップチェックボックスのフォームを中央に配置する方法

は私のコードです:

<div class="row checkbox-row"> 
       <div class="col-sm-6"> 
       <div class="checkbox-inline"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label> 
       </div> 
       </div> 
       <div class="row checkbox-row"> 
       <div class="col-sm-6"> 
        <div class="checkbox-inline"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label> 
        </div> 
       </div> 
       </div> 
      </div> 

答えて

2

どのようにしてみてください? https://jsfiddle.net/sxh0n7d1/20/

ブートストラップ行は12列のグリッドにあるので、私は2列ごとにまたがるチェックボックス、および4

<div class="row checkbox-row"> 
    <div class="col-xs-2 col-xs-offset-4"> 
    <div class="checkbox-inline"> 
     <label class="checkbox-inline"> 
     <input type="checkbox" value="">Adult News</label> 
    </div> 
    </div> 
    <div class="row checkbox-row"> 
    <div class="col-xs-2"> 
     <div class="checkbox-inline"> 
     <label class="checkbox-inline"> 
      <input type="checkbox" value="">Youth News</label> 
     </div> 
    </div> 
    </div> 
</div> 
+0

ありがとうございます!これは多くの助けになりました! –

+0

ありがとう!私はあなたのコードを使用し、CSSでいくつかの幅のチェックボックスを与え、彼らは私がそれらを望んだところに置かれた! –

+0

@PabloVeraこれですべての問題が解決され、それ以上の質問がない場合は、この質問に回答してください。 –

1

は、このようなものについては、この

<div class="row checkbox-row"> 
       <div class="col-sm-6"> 
       <div class="checkbox-inline" style="text-align:center;"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label> 
       </div> 
       </div> 
       <div class="row checkbox-row"> 
       <div class="col-sm-6"> 
        <div class="checkbox-inline" style="text-align:center;"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label> 
        </div> 
       </div> 
       </div> 
      </div> 
0

だけ右に4列を移動するには、もし最善の解決策が、作品ではない可能性がありあなたのページごとにcol-smを変更します。

<div class="col-sm-3"></div> 
       <div class="col-sm-2"> 
       <div class="checkbox-inline"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Adult News</label> 
       </div> 
       </div> 
       <div class="row checkbox-row"> 
       <div> 
        <div class="checkbox-inline"> 
        <label class="checkbox-inline"><input type="checkbox" value="">Youth News</label> 
        </div> 
       </div> 
       </div> 
      </div> 
</div> 
関連する問題