在Twitter Bootstrap中修复按钮大小

Question

我在我的Web应用程序中使用Twitter Bootstrap。我有一个带有许多按钮的表格。按钮的文本随着表格行的当前状态而改变。在Ajax请求响应后，我使用Jquery更改按钮文本。

我的问题是，这些按钮文本的长度不固定。有些长，有些短。因此，当一行文本很长而另一行文本很短时，这对用户的视觉效果很不好。

我能否固定按钮大小，使它们都具有相同的大小？

示例图片:

- trante

Answer 1

给所有你想要等尺寸的按钮添加一个类，例如 class="myButton"

然后在你的模板的自定义CSS区域，只需为该类设置宽度:

.myButton {
    width: 150px;
}

或者，如果你想让它们都有最长按钮的宽度，你可以使用jQuery，只需在.myButton按钮的值更改时调用此代码。这段代码在这里有解释：https://dev59.com/lG025IYBdhLWcg3wzpWK#5784399

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

这里有一个 jsfiddle 示例 http://jsfiddle.net/hQCf9/

- Timm

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>

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

- olemak

---

你能举个简单的例子吗？ - trante

我在按钮上遇到了一些奇怪的间距问题。当我将 .span4 应用于输入时，它正确扩展，但是当我在按钮上尝试时，左侧会有很多额外的空白。也许还有其他问题，不过在任何其他 span 值上也发生了这种情况。 - anjunatl