web-dev-qa-db-fra.com

Aligner verticalement forme horizontale des cases à cocher sans texte d'étiquette

J'ai changé de Bootstrap 3.0.0 à 3.2.0 ce matin parce que j'avais besoin de certaines des nouvelles fonctionnalités de mon application Web. Tout semblait fonctionner comme prévu jusqu'à ce que j'observe un problème d'alignement vertical des cases à cocher sous la forme .form-horizontal.

Un exemple est disponible sur http://www.bootply.com/AYN64feYze . Le balisage pour cet exemple minimum est:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

Si une case à cocher ne contient pas de texte suivant, elle est placée sous la ligne dans laquelle elle apparaît.

Y at-il une solution à ce problème? Comme j'ai déjà l'étiquette principale, je n'ai pas besoin d'un texte suivant pour mes cases à cocher. Ma solution actuelle consiste à ajouter du texte au <label> contenant le <input type="checkbox"> et à utiliser la couleur d'arrière-plan comme couleur de police pour masquer le texte.

Merci de votre aide.

htmlcsstwitter-bootstrapcheckboxvertical-alignment
8
Thylossus

Je ne sais pas si cela affectera le reste de la présentation de votre formulaire, mais le problème semble être résolu si vous modifiez l'attribut d'affichage de <label> (défini à inline-block) par:

label{
    display:inline;
}

Voici un mis à jour Bootply . J'espère que cela t'aides! Faites moi savoir si vous avez des questions.

7
Serlite

Cela a fonctionné pour moi:

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>

Tout d'abord, je devais supprimer l'élément <div class='checkbox'>. J'ai ensuite apporté les modifications suivantes à l'élément d'étiquette de case à cocher:

  1. Placez l'étiquette dans sa propre colonne div <div class="col-lg-3"></div>
  2. Supprimer class = "control-label"
  3. Ajoutez class = "pull-right".

Je me suis retrouvé avec une case à cocher alignée avec les autres entrées horizontalement et avec son étiquette verticalement.

2
Nathan Agersea

Si vous n'avez pas besoin du texte suivant pour les cases à cocher, pourquoi ne pas simplement supprimer le <label> entourant les cases à cocher. Ainsi.

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

Ce code a semblé fonctionner dans votre Bootply quand je l'ai essayé.

Et rappelez-vous si vous avez une étiquette qui utilise l'attribut for pour les lecteurs d'écran et que cela soit plus facile pour vos utilisateurs (ils peuvent simplement cliquer sur l'étiquette au lieu de la case à cocher).

0
Rob Quincey