부트 스트랩 3에서 'btn-group'을 사용하고 정렬

Question

새 부트 스트랩 3을 고맙게 생각합니다 ... 5 개의 열이있는 테이블을 만들었습니다. 마지막 3 열은 2 x 'a href'와 1 x 'form'을 포함하지만 모두가 30 x 30 크기의 버튼으로 작동합니다. 양식이 블록 요소이기 때문에 양식이 가장 큰 문제 였고 모든 버튼 한 줄에 서로 옆에.

그래서 지금까지 내 솔루션 :

<table> 
<tr> 
    <td colspan="3"> 
    <div class="btn-toolbar"> 
    <div class="btn-group"> Link 1 </div> 
    <div class="btn-group"> Link 2 </div> 
    <div class="btn-group"> Form 1 </div> 
    </div> 

이 잘 작동합니다. 하지만이 세 객체를 셀의 오른쪽에 정렬하고 싶습니다. 오른쪽 정렬 할 방법이 없습니다.

<div class="btn-toolbar text-right"> 

Do not work!

<tr colspan="3" class="text-right"> 

Do not work!

<div class="btn-toolbar pull-right"> 

작동!

하지만 이것이 올바른지 확실하지 않습니다. 나를 위해 많이 중첩 된 코드입니다.

적은 코드로이를 해결할 수있는 방법이 있습니까?

Answer 1

pull-right을 사용하여 원하는 것을 얻는 데는 아무런 문제가 없습니다.

<h2>Stock Management</h2> 
<hr/> 
<div class='btn-group pull-right'> 
    <a href='#' class='btn btn-default'>Add New Product</a> 
    <a href='#' class='btn btn-info'>Supplier List</a> 
    <a href='#' class='btn btn-danger'>Stock Alerts</a> 
</div> 
<div class='clearfix'></div> 
<hr/> 

당신은 나중에 그렇지 않으면 중복 문제가 발생할 수 clearfix의 클래스와 div이 필요합니다.

드롭 다운 메뉴에서 pull-right 클래스의 사용에 관한 부트 스트랩 문서에서 참고 사항 : v3.1.0의로

되지 않는 .pull 오른쪽 정렬

, 우리는 .pull 오른쪽 사용되지 않는 한 드롭 다운 메뉴. 메뉴를 오른쪽 정렬하려면 .dropdown-menu-right를 사용하십시오. navbar의 오른쪽 정렬 된 nav 구성 요소는이 클래스의 mixin 버전을 사용하여 자동으로 메뉴를 정렬합니다. 그것을 무시하려면 .dropdown-menu-left를 사용하십시오.

PS - 데이터 표시 외에 다른 용도로 테이블을 사용하지 마십시오. 그런 종류의 웹 디자인은 1998 년에 남겨져 야합니다. P

Answer 2

이것이 당신의 목적을 해결하는지보십시오. 나는 당신 부트 스트랩 클래스를 수정

<table> 
    <tr> 
     <td colspan="3"> 
      <div class="btn-toolbar"> 
       <div class="btn-group"> Link 1 </div> 
        <div class="btn-group"> Link 2 </div> 
        <div class="btn-group"> Form 1 </div>  
      </div>