La fixation de la taille du bouton de Twitter Bootstrap

- Je utiliser Twitter Bootstrap dans mon application web.
J'ai une table avec plusieurs boutons.
Le texte du bouton change avec l'état actuel de la ligne de la table.
- Je modifier le texte du bouton avec Jquery, après une requête Ajax réponses.

Mon problème est que les boutons, des textes d'une longueur n'est pas fixe.
Certains d'entre eux est long à certains d'entre eux est court.

Alors, quand une ligne a du texte long et l'autre court texte,
il semble mal à l'attention des utilisateurs.

Puis-je fixer la taille du bouton? Donc tous a la même taille?

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

OriginalL'auteur trante | 2012-05-05

15

Donner à tous les boutons que vous voulez être de taille égale une classe par exemple class="myButton"

Puis dans le CSS personnalisé de la zone de votre modèle, vous pouvez simplement donner à cette catégorie largeur:
```
.myButton {
    width: 150px;
}
```
Ou, si vous souhaitez qu'ils ont la largeur de la plus longue touche, vous pouvez utiliser jQuery, il suffit d'appeler ce code chaque fois que les valeurs de votre .myButton boutons de changement. Ce code est expliqué ici: https://stackoverflow.com/a/5784399/1130734
```
$('.myButton').width(
    Math.max.apply(
        Math,
        $('.myButton').map(function(){
            return $(this).outerWidth();
        }).get()
    )
);
```
Ici est un jsfiddle exemple http://jsfiddle.net/hQCf9/

OriginalL'auteur Timm

Encore plus simple, l'utilisation de la durée de* classe (durée, span2 etc).
Cela permet de garder les boutons de synchronisation avec le réseau.

Noter que les espaces pour certains éléments (comme le paragraphe) est différente de l'espace réel, de boutons, de sorte que ne sera probablement gâcher la taille des boutons, si vous mélangez les éléments de votre tableau (comme je l'ai fait sur le but dans l'exemple ci-dessous). Donc, il est préférable de s'en tenir à un seul type d'élément.

Personnellement, je préfère éviter les tables, mais vous avez dit que vous alliez à l'utilisation de tables, donc je l'ai fait aussi. Peut-être vous pourriez résoudre ce avec juste la grille/échafaudage si, ce serait probablement plus joli, plus souple et plus réactif. Votre appel.

Rappelez-vous aussi que vous pouvez le style de pratiquement n'importe quel élément à ressembler à un bouton. Si votre bouton ne contient qu'un lien, puis Un tag est probablement mieux; il peut encore regarder et fonctionner comme un bouton.

Heres une affreuse vieille table avec beaucoup de clickables, il fait le travail d'expliquer cela, j'espère:

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

Noter que exactement les mêmes classes sont appelées pour chacun des clickables.
J'espère que cela répond à votre question.

Pouvez-vous donner un exemple simple s'il vous plaît?
J'ai eu un peu bizarre espacement des problèmes avec ce sur les boutons. Lorsque j'ai appliqué .span4 pour une entrée, il s'est étendu correctement, mais quand je l'ai essayé sur un bouton, j'ai eu beaucoup de espaces à la gauche du bouton. Peut-être il ya quelque chose de mal, cependant. (C'est arrivé aussi à tout les autres durée de valeurs)

OriginalL'auteur olemak

Vous devez vous connecter pour publier un commentaire.