web-dev-qa-db-fra.com

Le texte de l'étiquette ne pas envelopper dans une configuration de grille Bootstrap

J'essaie de ne pas inclure les étiquettes dans Bootstrap3 mais n'arrive pas à le faire fonctionner.

J'ai essayé de placer «Word-wrap: break-Word» même sur l'étiquette, mais cela ne semble pas non plus casser la phrase de l'étiquette.

J'ai vu dans la documentation «insérer des étiquettes et des contrôles dans .form-group pour un espacement optimal». mais je ne peux pas utiliser 'groupe de formulaire', je pense que si je veux utiliser des divs bootstrap pour contrôler la disposition de grille/formulaire des étiquettes/réponses séparément (les étiquettes/entrées sont plus conviviales et peuvent être étendues à 100% de l'écran lorsque xs écrans, mais sur sm + écran, les étiquettes apparaissent en haut à gauche de l'entrée pour économiser de l'espace à l'écran).

Voici un exemple ... Développez le cadre latéral droit du jsfiddle très grand, puis vous voyez que les étiquettes de formulaire sont placées à gauche avec un alignement du texte à droite et que le problème se produit alors.

http://jsfiddle.net/armyofda12mnkeys/nud64aq7/

Image ci-dessous de la 3ème étiquette qui n’emballe pas: enter image description here

Voici le code de base que j'utilise pour cette étiquette/configuration d'entrée:

<div class="col-xs-12 col-sm-4  label">
    <label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label>
</div>
<div class="col-xs-12 col-sm-8 answer">
    <input type="text" class="form-control" placeholder="Enter your house # here" />
</div>
csstwitter-bootstraptwitter-bootstrap-3
8
armyofda12mnkeys

Si vous regardez à travers les éléments DOM de votre Fiddle, vous verrez ce code pour la label:

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

Supprimez simplement la propriété ou écrasez le white-space: nowrap; ou définissez la propriété sur normal

Update 1.0 : Juste pour clarifier, cette propriété CSS n'existe que dans Bootstrap v3. Dans la version 4.x, la propriété white-space a été supprimée des éléments label.

Mise à jour 2.0 : Des personnes ont posé des questions sur BS v4.1 et parcourant leur code, la variable label apparaît comme un texte normal et ne contient pas de propriété white-space. Cependant, dans la section des groupes d’entrée, j’ai remarqué que certaines des classes utilisées contenaient white-space: nowrap (c.-à-d. Classe input-group-text). Le correctif serait le même, écrasez la propriété dans un fichier séparé ou modifiez cette classe spécifique pour qu'elle utilise white-space: normal. Si cela se produit dans une autre section que je ne vois pas, faites-le-moi savoir dans les commentaires et je serais heureux de jeter un coup d'oeil!

13
crazymatt

Essayez-vous de rendre le texte wrap? Si oui, ajoutez 

    white-space:normal;

à la classe d'étiquette. 

http://jsfiddle.net/kswdusL6/

2
Dr Shenanigan

ajouter ceci à l'étiquette

label {
    white-space: normal;
}

exemple de travail: http://jsfiddle.net/nud64aq7/4/

1
Fetz