Twitterのブートストラップでボタンサイズを固定

Question

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

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

したがって、1行に長いテキストがあり、もう1行に短いテキストがある場合、 はユーザーの目に悪いようです。

ボタンのサイズを修正できますか？だから、それらのすべてが等しいサイズですか？

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

Answer 1

あなたは同じサイズのクラスなどになりたいすべてのボタンを与えますあなたがそれらすべてはあなたがjQueryのを使用することができる最長のボタンの幅を持つようにしたい場合は、

.myButton { 
    width: 150px; 
} 

または：class="myButton"

次に、あなたのテンプレートのカスタムCSSエリアであなただけのそのクラスに幅を与えることができます.myButtonボタンの値が変わるたびにこのコードを呼び出してください。このコードはここで説明されています。ここではhttps://stackoverflow.com/a/5784399/1130734

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

はhttp://jsfiddle.net/hQCf9/

Answer 2

がさらに簡単jsfiddle例であり、スパン*クラス（スパン、SPAN2など）を使用します。 これは、ボタンをグリッドと同期させます。

段落のようないくつかの要素の空白は、実際のボタンの空白とは異なるので、テーブルの要素を混ぜるとボタンのサイズが大きくなる可能性があります（下の例では）。だから、ただ一つの要素に固執するのが最善です。

私は個人的にはテーブルを避けたいと思っていますが、テーブルを使用すると言いました。あなたはグリッド/足場だけでこれを解決することができますか、それはおそらくもっときれいで柔軟性があり、より応答性が高いでしょう。あなたの電話。

また、ボタンのように見える要素をほとんどスタイルできます。あなたのボタンにちょうどリンクが含まれていれば、おそらくAタグが良いでしょう。ボタンのように見え、機能することができます。まったく同じクラスがclickablesごとに呼び出されること

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

注：clickablesのたくさんの相続人の醜い古いテーブル

は、それは私が願ってこれを説明するの仕事をしていません。 これがあなたの質問に答えることを願っています。