28 votes

Empêcher Twitter bootstrap vide <dd> remplissage avec suivant <dd> valeur

Bonjour CSS gourous là-bas,

J'aime le twitter bootstrap, et je suis le prototype d'un grand nombre de projets fondés sur elle, j'ai rencontré ce problème, où si le dd balise n'a pas de code HTML à l'intérieur d'elle, un autre dd prend sa place, je comprends pourquoi ce qui se passe, parce que de la façon dont le dl est de style il permet de dd de l'étendre à plus d'une ligne si le contenu doit, je ne veux pas briser ce beau style, je veux juste le modifier de sorte que si le dd de la valeur est vide, il ne veut tout simplement pas s'effondrer, donc, avant de me faire quelque chose de fou ici comme côté serveur pour masquer le vide de valeurs, ou de modifier le comportement d'origine ou même l'ajout de jQuery, je voulais savoir si quelqu'un pouvait m'aider, c'est une image pour illustrer ce que je dis, c'est RTL de sorte que le dt est sur la droite.

51voto

Gaël Marziou Points 914

J'ai utilisé ce remplacement de style.

 .dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}
 

17voto

lulalala Points 3895

Selon le développeur , <dd> ne devrait jamais être vide (ce que je ne suis pas d'accord).

Et je pense qu'il préfère que les utilisateurs ajoutent la classe clearfix aux <dd> s qui pourraient être vides.

<dd class="clearfix"></dd>

Mise à jour

Ce correctif est inclus après 3.2, voir la note de publication .

1voto

rebroken Points 388

Si j'interprète correctement ce commit , ce sera le comportement par défaut dans 3.0.0. D'ici là, vous pouvez également essayer d'ajouter dl-horizontal comme alternative à simplement clearfix .

 <dd class="dl-horizontal"></dd>
 

1voto

0voto

Jean F. Points 96

Vous pouvez peut-être essayer juste cela:

 dd {
    display: inline-block;
}
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X