두 개의 부트 스트랩 단추 나란히 나란히

Question

내가 갖고 싶습니다 제출 및 단추를 옆에, 어쩌면 5 픽셀 씩 취소하십시오. 나는 당신이 라이브 코드에서 볼 수 쓴 :

http://www.bootply.com/Y3t35NGADa

그러나 두 버튼 사이의 거리가 많은입니다! 나는 그들이 서로 더 가까워지기를 바란다. 나는 또는 margin-right을 에 제출하려고했으나 아무 것도하지 않았다. 버튼을 제출했다.

Answer 1

왜냐하면 u가 col-xs-4를 제공했기 때문입니다. 두 개의 버튼이 4 열 공간을 차지하는 이유입니다.

옵션 1 : 여기 당신의 대답

입니다

  <div class="col-xs-1"> 
       <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button> 
      </div> 

      <div class="col-xs-1"> 
       <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button> 
      </div> 

     </div> 

옵션 2 : 장소 옆에하지 않아도 서로

<div class="row"> 

       <div class="col-xs-4"> 
        <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button> 
        <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button> 
       </div> 
      </div> 

Answer 2

에 두 개의 버튼 분리 된 열에 넣어 두십시오. 다음과 같이 서로를 유지하십시오.

  <div class="row"> 

      <div class="col-xs-4"> 
       <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button> 
       <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button> 
      </div> 


     </div> 

Answer 3

부트 스트랩 클래스 버튼 그룹으로이 작업을 수행 할 수 있습니다. 서로 가능한 한 많이 내가 사용 옆에있는 두 개의 버튼을 가지고 싶다면

<div class="button-group ">     
       <button id="submit" name="button" value="register" class="btn btn-primary">Submit</button>    
       <button id="cancel" name="button" value="cancel" class="btn btn-secondary">Cancel</button>   
</div> 

Answer 4

이 http://www.bootply.com/oX77TSFRY5 : 당신이 언급처럼이 거리 5px을 원하는 경우에

<style> 
    .clear { 
    clear: both;  
    } 
</style> 

<div class="row"> 
    <div class="col-xs-4"> 
    <button value="cancel" class="btn btn-default pull-left">Cancel</button> 
    <button value="register" class="btn btn-primary pull-left">Submit</button> 
    <div class="clear"></div> 
</div> 
</div> 

당신의 질문이 있으면 pull-left 클래스 만 제거하면됩니다.