修复 Twitter Bootstrap 中的按钮大小答案

【问题标题】：Fixing button size in Twitter Bootstrap修复 Twitter Bootstrap 中的按钮大小
【发布时间】：2012-05-14 15:30:29
【问题描述】：

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

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

所以当一行有长文本而另一行有短文本时，这对用户的眼睛来说似乎很糟糕。

我可以固定按钮大小吗？那么它们的大小都一样吗？

【问题讨论】：

标签： jquery html twitter-bootstrap

【解决方案1】：

更简单的是，使用 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>

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

【讨论】：

你能举个简单的例子吗？
我在按钮上遇到了一些奇怪的间距问题。当我将 .span4 应用于输入时，它会正确扩展，但是当我在按钮上尝试它时，按钮左侧有很多额外的空白。不过，也许还有其他问题。（它也发生在任何其他跨度值上）

【解决方案2】：

给所有你想要大小相同的按钮一个类，例如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/

【讨论】：