부트 스트랩 2.3.2 테이블 행의 분할 버튼 드롭 다운

Question

오른쪽의 드롭 다운은 테이블 셀에 있으며, 이는 데스크탑 브라우저에서 의도 한대로 작동합니다. 모바일 그러나

는 클릭에 드롭 다운 두 행으로 분할됩니다 :

HTML

<table class="table table-striped table-bordered table-hover"> 
<tr> 
<td> ... </td> 
<td> ... </td> 
<td> ... </td> 
<td> 
    <div class="btn-group"> 
     <a href="#" class="btn btn-primary btn-small"><i class="icon-eye-open icon-white"></i> Visualizza</a> 
     <button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#"><i class="icon-pencil"></i> Modifica</a></li> 
      <li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li> 
     </ul> 
    </div> 
</td> 
</tr> 
</table> 

Answer 1

문제는 대부분 테이블 셀에서 유래

두 요소 모두 너비가 너무 짧습니다.

가장 간단한 해결책은 순수한 부트 스트랩에서 벗어나더라도 클래스에 해당 셀을 추가하고 최소 너비를 추가하는 것입니다.

HTML :

<td> ... </td> 
<td class="dropdownCell"> 
    <div class="btn-group"> 
    ... 

CSS는 :

.dropdownCell { min-width:130px; } 

바이올린은 여기에 있습니다 : http://jsfiddle.net/a4kx75t1/1/