Question

I use Twitter Bootstrap in 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.

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.

我能否确定纽州的规模? 因此,他们都有平等的规模?

Answer 1

在座标上,你想要达到相等的级别,例如class=“myButton”。

然后,在你模版的CSS习俗领域,你只能给这个类别一个宽松:

.myButton {
    width: 150px;
}

<>Or/strong>,如果你想要他们都知道你能够使用最漫长的纽芬兰语,那么只要您的<代码”的数值,就只用这个代码。我的Buttonuttons变化。 https://stackoverflow.com/a/5784399/1130734。

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

http://jsfiddle.net

Answer 2

Even simpler, use the span* class (span, span2 etc). This will keep the buttons in sync with the grid.

请注意,一些要素的白色空间(如一段)与实际的纽埃空间不同,因此,如果你在桌子上混杂一些要素,则可能扩大纽埃的面积(如我在下文中所做的那样)。因此,最好只保留一种内容。

我个人希望避免表格,但你说,你将使用表格,因此我也这样做。你们可以只靠电网/耳光来解决这一问题,但这可能是先天、更灵活和反应更强的。你的呼吁。

人们还记得,你大概会把任何因素看上去。如果你ton子只是一个环节,那么一个tag子也许会更好;它仍然可以像一个 but子一样看待和发挥功能。

在这里,用大量可点击的粗略表格,我确实做了解释,我希望:

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

友情链接