web-dev-qa-db-fra.com

Comment puis-je laisser les éléments de formulaire Bootstrap?

J'utilise Bootstrap pour la première fois, et j'ai beaucoup de difficulté à aligner cette forme horizontale vers la gauche.

Les éléments de la liste sont horizontaux, comme il se doit, mais je veux que les étiquettes de contrôle (Bootstrap pour les étiquettes de formulaire)) soient toutes à la même position, flottant à gauche.

Le formulaire est contenu dans une div avec une étendue de 7, car mon site est composé de deux colonnes - 7 et 4 colonnes.

Ci-dessous mon HTML. Si vous regardez sous "Formulaires horizontaux" sur cette page http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms , vous verrez que les étiquettes sont alignées à gauche, mais pas absolument aligné à gauche, de sorte que le début des étiquettes se trouve à la même position verticale.

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
            <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
            <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
            <select class="span4">
                <!-- Add some CSS and JS to make a placeholder value-->
                <option value="Kittens">Kittens</option>
                <option value="Keyboard Cat">Keyboard Cat</option>
                <option value="Twitter Bird">Twitter Bird</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
            <input type="text" class="span4" id="goal">
        </div>
    </div>
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
htmlcssformstwitter-bootstrap
41
Tom Maxwell

Juste mes deux cents. Si vous utilisez Bootstrap 3, je voudrais simplement ajouter un style supplémentaire à la feuille de style de votre propre site, qui contrôle le text-left style de la control-label.

Si vous deviez ajouter text-left au libellé, il existe par défaut un autre style qui remplace ce .form-horizontal .control-label. Donc si vous ajoutez:

.form-horizontal .control-label.text-left{
    text-align: left;
}

Puis le construit en text-left style est appliqué à l'étiquette correctement.

51
Tim B James

Si vous dites que votre problème est de savoir comment aligner à gauche les étiquettes de formulaire, voyez si cela vous aide:
http://jsfiddle.net/panchroma/8gYPQ/

Essayez de changer le texte-align gauche/droite dans le CSS

.form-horizontal .control-label{
    /* text-align:right; */
    text-align:left;
    background-color:#ffa;
}

Bonne chance!

37
David Taiaroa

Au lieu de modifier le fichier original bootstrap css), créez un nouveau fichier css qui remplacera le style par défaut.

Assurez-vous d'inclure le nouveau fichier css après avoir inclus le fichier bootstrap.css.

Dans le nouveau fichier css faire

.form-horizontal .control-label{
   text-align:left !important; 
}
5
Ruben Benjamin

Ajoutez simplement style="text-align: left" à votre étiquette.

2
Bruno F Souza

"pull-left" est ce dont vous avez besoin, on dirait que vous utilisez Bootstrap 2, je ne suis pas sûr que cela soit disponible, pensez à bootstrap 3, Bien sûr, c’est un énorme travail! ... pour Bootstrap 3 mais vous devez vous assurer que vous avez également 12 colonnes dans chaque ligne, sinon vous aurez des problèmes.

1
SupportLocusDev