修复Twitter Bootstrap中的按钮大小 [英] Fixing button size in Twitter Bootstrap

问题描述

我在我的网路应用程式中使用 Twitter Bootstrap 。
我有一个有很多按钮的桌子。
按钮文本随表格行当前状态发生变化。
在Ajax请求响应之后，我使用Jquery更改了按钮文本。

我的麻烦是，这些按钮文本的长度不固定。
其中一些是长的，其中一些是短的。

所以当一行有长文本而另一行有短文本时，
似乎不好用户的眼睛。

我可以修复按钮大小吗？所以他们都有相同的尺寸？

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

解决方案

给所有你想要的按钮相同的大小一类例如然后在你的模板的自定义CSS区域中，你可以给这个类的宽度设置一个宽度。 class =myButton

：

  .myButton {
 width：150px; 
} 
  

或者，如果您希望它们全部拥有您可以使用jQuery的最长按钮的宽度，只要您的 .myButton 按钮的值发生更改，就调用此代码。此代码解释如下： https://stackoverflow.com/a/5784399/1130734

  $（'。myButton'）。width（
 Math.max.apply（
 Math，
 $（' （）; 
））。get（）
）
）; 
  

以下是一个jsfiddle示例 http://jsfiddle.net/hQCf9/

I use Twitter Bootstrap in my web app. I have a table with many buttons. Text of button changes with the current state of the row of table. I change button text with Jquery, after Ajax request responses.

My trouble is, these button texts' length is not fixed. Some of them is long some of them is short.

So when one row has long text and another one has short text, it seems bad to user's eye.

Can I fix button size? So all of them has equal size?

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

解决方案

Give all the buttons you want to be of equal size a class e.g. class="myButton"

Then in the custom CSS area of your template you can just give that class a width:

.myButton {
    width: 150px;
}

Or, if you want them all to have width of the longest button you can use jQuery, just call this code whenever the values of your .myButton buttons change. This code is explained here: https://stackoverflow.com/a/5784399/1130734

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

Here is a jsfiddle example http://jsfiddle.net/hQCf9/

这篇关于修复Twitter Bootstrap中的按钮大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！