4

Web アプリでTwitter Bootstrapを使用しています。私は多くのボタンを持つテーブルを持っています。ボタンのテキストは、テーブルの行の現在の状態に応じて変化します。Ajax リクエストの応答後に、Jquery でボタンのテキストを変更します。

問題は、これらのボタン テキストの長さが固定されていないことです。長いものもあれば短いものもあります。

そのため、ある行に長いテキストがあり、別の行に短いテキストがある場合、ユーザーの目には悪く見えます。

ボタンのサイズを固定できますか? それで、それらのすべてのサイズは同じですか？

4

2 に答える 2

15

同じサイズにしたいすべてのボタンをクラスに分けます。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/

于 2012-05-05T08:35:47.050 に答える
1

さらに簡単に、span* クラス (span、span2 など) を使用します。これにより、ボタンがグリッドと同期されます。

一部の要素 (段落など) の空白は、実際のボタンの空白とは異なることに注意してください。そのため、テーブルに要素を混在させると、ボタンのサイズが台無しになる可能性があります (以下の例で意図的に行ったように)。したがって、1 種類の要素だけに固執するのが最善です。

個人的には表は避けたいのですが、あなたが表を使うとおっしゃっていたので、私もそうしました。グリッド/足場だけでこれを解決できるかもしれませんが、それはおそらくよりきれいで、より柔軟で、より反応が良いでしょう。あなたの電話。

また、ほとんどすべての要素をボタンのようにスタイル設定できることも覚えておいてください。ボタンにリンクのみが含まれている場合は、おそらく 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>

それぞれのクリッカブルに対してまったく同じクラスが呼び出されることに注意してください。これがあなたの質問に答えることを願っています。

于 2012-08-08T14:56:19.407 に答える