2016-08-26 3 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

어떻게 이런 일에 대한 시도 :

여기 내 코드입니까? 부트 스트랩 행 12 열 그리드에 있기 때문에 https://jsfiddle.net/sxh0n7d1/20/

, I 체크 박스는 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> 
관련 문제