jQuery 修复 Twitter Bootstrap 中的按钮大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10459808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixing button size in Twitter Bootstrap
提问by trante
I use Twitter Bootstrapin 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.
我在我的网络应用程序中使用Twitter Bootstrap。我有一张有很多按钮的桌子。按钮的文本随着表格行的当前状态而变化。在 Ajax 请求响应之后，我使用 Jquery 更改按钮文本。
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?
我可以修复按钮大小吗？所以它们的大小都是一样的？
回答by Timm
Give all the buttons you want to be of equal size a class e.g. class="myButton"
给所有你想要相同大小的按钮一个类，例如 class="myButton"
Then in the custom CSS area of your template you can just give that class a width:
然后在模板的自定义 CSS 区域中，您可以为该类指定一个宽度：
.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 .myButtonbuttons change. This code is explained here: https://stackoverflow.com/a/5784399/1130734
或者，如果您希望它们都具有可以使用 jQuery 的最长按钮的宽度，只需在.myButton按钮的值发生变化时调用此代码即可。此处解释了此代码：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/
这是一个 jsfiddle 示例http://jsfiddle.net/hQCf9/
回答by olemak
Even simpler, use the span* class (span, span2 etc). This will keep the buttons in sync with the grid.
更简单的是，使用 span* 类（span、span2 等）。这将使按钮与网格保持同步。
Note that the whitespace for some elements (like paragraph) is different from the whitespace on actual buttons, so that will probably mess up the button size if you mix elements in your table (like I did on purpose in the example below). So it is best to stick to just one kind of element.
请注意，某些元素（如段落）的空白与实际按钮上的空白不同，因此如果您在表格中混合元素（就像我在下面的示例中故意做的那样），这可能会弄乱按钮的大小。所以最好只坚持一种元素。
Personally, I prefer to avoid tables, but you said you were going to use tables, so I did too. Could be you could solve this with just the grid/scaffolding though, that would probably be prettier, more flexible and more responsive. Your call.
就我个人而言，我更喜欢避免使用表格，但是您说要使用表格，所以我也这样做了。你能不能只用网格/脚手架来解决这个问题，这可能会更漂亮、更灵活、反应更灵敏。您的来电。
Also remember that you can style pretty much any element to look like a button. If your button just contains a link, then an A tag is probably better; it can still look and function like a button.
还请记住，您几乎可以将任何元素设置为看起来像按钮。如果你的按钮只包含一个链接，那么 A 标签可能更好；它仍然可以像按钮一样外观和功能。
Heres an ugly old table with lots of clickables, it does the job of explaining this I hope:
这是一张丑陋的旧桌子，上面有很多可点击的东西，我希望它可以解释这一点：
<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>
Note that exactly the same classes are called for each of the clickables. I hope this answers your question.
请注意，每个可点击项都调用了完全相同的类。我希望这回答了你的问题。
