jquery - 修复 Twitter Bootstrap 中的按钮大小

Question

我在我的网络应用程序中使用Twitter Bootstrap 。我有一张有很多按钮的桌子。按钮的文本会随着表格行的当前状态而变化。在 Ajax 请求响应之后，我用 Jquery 更改按钮文本。

我的问题是，这些按钮文本的长度不固定。有的长有的短。

因此，当一行有长文本而另一行有短文本时，用户的眼睛看起来很糟糕。

我可以固定按钮大小吗？那么它们都具有相同的大小吗？

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

更简单的是，使用 span* 类（span、span2 等）。这将使按钮与网格保持同步。

请注意，某些元素（如段落）的空白与实际按钮上的空白不同，因此如果您在表格中混合元素（就像我在下面的示例中故意做的那样），这可能会弄乱按钮的大小。所以最好只坚持一种元素。

就个人而言，我更喜欢避免使用桌子，但你说你会使用桌子，所以我也这样做了。您是否可以仅使用网格/脚手架来解决此问题，这可能会更漂亮，更灵活且响应更快。你的来电。

还请记住，您几乎可以将任何元素设置为看起来像按钮。如果您的按钮只包含一个链接，那么 A 标签可能会更好；它的外观和功能仍然像一个按钮。

这是一张丑陋的旧桌子，上面有很多可点击的东西，我希望它可以解释这一点：

<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>

请注意，每个可点击对象都调用了完全相同的类。我希望这回答了你的问题。