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的。 我希望这能回答你的问题。