Question

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

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

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

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

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

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>

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

修复Twitter Bootstrap中的按钮大小

2 个答案: