트위터 부트 스트랩의 고정 버튼 크기

Question

웹 앱에 Twitter Bootstrap을 사용합니다. 많은 버튼이있는 테이블이 있습니다. 버튼 텍스트는 테이블 행의 현재 상태와 함께 변경됩니다. Ajax 요청 응답 후에 Jquery로 단추 텍스트를 변경합니다.

내 버튼의 텍스트 길이가 고정되어 있지 않습니다. 그들 중 일부는 짧습니다.

한 줄에 긴 텍스트가 있고 다른 텍스트에 짧은 텍스트가있는 경우 사용자의 눈에는 좋지 않습니다.

버튼 크기를 수정할 수 있습니까? 그래서 모두 같은 크기입니까?

http://i46.tinypic.com/28726jb.jpg

Answer 1

당신은 동일한 크기의 클래스, 예를 들어이 될하고자하는 모든 버튼을 부여 당신이 그들 모두가 당신이 jQuery를 사용할 수있는 가장 긴 버튼의 폭을 갖고 싶어,

.myButton { 
    width: 150px; 
} 

또는 : class="myButton"

그런 다음 템플릿의 사용자 정의 CSS 영역에서 당신은 그 클래스를 폭을 제공 할 수 있습니다 .myButton 버튼의 값이 변경 될 때마다이 코드를 호출하면됩니다. 이 코드는 여기에 설명 : 여기에

$('.myButton').width(
    Math.max.apply(
     Math, 
     $('.myButton').map(function(){ 
      return $(this).outerWidth(); 
     }).get() 
    ) 
); 

https://stackoverflow.com/a/5784399/1130734는 jsfiddle 예에게 있습니다 http://jsfiddle.net/hQCf9/

Answer 2

도 간단 스팬 * 클래스 사용 (범위를, span2 등). 그러면 단추가 눈금과 동기화됩니다.

단락과 같은 일부 요소의 공백은 실제 버튼의 공백과 다르므로 아래 예제에서 의도 한대로 요소를 혼합하면 버튼 크기가 엉망이 될 수 있습니다). 그러므로 한 종류의 요소 만 고수하는 것이 가장 좋습니다.

개인적으로 나는 테이블을 피하는 것을 선호하지만 테이블을 사용할 것이라고 말했기 때문에 나 역시 그렇게했습니다. 그리드/스캐 폴딩만으로도이를 해결할 수 있습니까? 아마 더 예쁘고 유연하며 반응이 좋을 것입니다. 너의 전화.

또한 단추처럼 보이도록 요소를 스타일링 할 수 있습니다. 버튼에 링크 만 있으면 A 태그가 더 좋을 것입니다. 버튼처럼 보이고 기능 할 수 있습니다. 정확히 같은 클래스가 clickables의 각 요구되는

<table class="span8"> 
    <tr> 
     <td> 
     You could do buttons 
     </td> 

     <td> 
     <button class="span3 btn btn-info">Like this button</button> 
     </td> 

     <td> 
     <button class="span3 btn btn-info">and this</button> 
     </td> 
    </tr> 

    <tr>   
     <td> 
     Or a paragraph 
     </td> 

      <td> 
     <p class="span3 btn btn-info">Like this paragraph</p> 
     </td> 

     <td> 
     <a href="http://www.example.com" class="span3 btn btn-info">Or an anchor</a> 
     </td> 

    </tr> 

     <tr>   
     <td> 
     Note the difference in whitespace on Block elements (like Paragraphs and Anchors) and inline elements (like buttons). 
     </td> 

      <td> 
     <p class="span3 btn btn-info">Like this paragraph</p> 
     </td> 

     <td> 
     <a href="http://stackoverflow.com/" class="span3 btn btn-info">Or an anchor with an ridicilous amont of text on it, but this things do happen so plan ahead.</a> 
     </td> 

    </tr> 

    <tr>   
     <td> 
     Or a paragraph with a link 
     </td> 

      <td> 
     <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Paragraph w/link</p></a> 
     </td> 

     <td> 
     <button class="span3 btn btn-info">This a button with fairly long text. Beware of whitespace</button> 
     </td> 

    </tr> 

    <tr>   
     <td> 
     Or a paragraph with a link 
     </td> 
<td> 
     <button class="span3 btn btn-info">Another button</button> 
     </td> 

     <td> 
     <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Another linked paragraph</p></a> 
     </td> 



    </tr> 


</table> 

참고 : clickables 많은 Heres는 못생긴 이전 테이블

은, 내가 희망이 설명의 작업을 수행합니다. 질문에 대한 답변이 되었기를 바랍니다.