Twitter中的固定按鈕大小引導程序

Question

我在我的web應用程序中使用Twitter Bootstrap。 我有許多按鈕的桌子。 按鈕文本隨表格行當前狀態而變化。 在Ajax請求響應之後，我使用Jquery更改了按鈕文本。

我的麻煩是，這些按鈕文本的長度不固定。它們中的一些很長，其中一些很短。

因此，當一行有長文本而另一行有短文本時，用戶的眼睛看起來不好。

我可以修復按鈕大小嗎？所以他們都有相同的大小？

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

Answer 1

給所有的按鈕你想成爲大小相等的一類如中class="myButton"

然後在你的模板的自定義CSS區，您可以把該類寬度：

.myButton { 
    width: 150px; 
} 

或者，如果你希望它們都具有可以使用jQuery最長的按鈕的寬度，只要您的.myButton按鈕的值發生更改，就調用此代碼。此代碼是在這裏解釋：https://stackoverflow.com/a/5784399/1130734

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

下面是一個例子的jsfiddle http://jsfiddle.net/hQCf9/

Answer 2

更簡單，使用範圍*類（跨度，跨度2等）。 這將保持按鈕與網格同步。

請注意，某些元素（如段落）的空白不同於實際按鈕上的空白，因此如果您在表格中混合了元素（如我在下面的示例中所做的那樣），可能會弄亂按鈕大小）。所以最好只堅持一種元素。個人而言，我更喜歡避免使用表格，但是您說您要使用表格，所以我也這麼做了。可能你可以用網格/腳手架來解決這個問題，這可能會更漂亮，更靈活，反應更快。你的來電。

另外請記住，您可以設計幾乎任何元素看起來像一個按鈕。如果你的按鈕只包含一個鏈接，那麼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的。 我希望這能回答你的問題。