Je peux donc voir que cette erreur a déjà eu des discussions sur
empêcher-twitter-bootstrap-empty-dd-fill-with-next-dd-value
et que le développeur avait précédemment dit que ce n'était pas corrigé mais ...
Comme indiqué, les champs d'adresse vides entraînent la réduction des marges entre les étiquettes. Il est produit via un template Django avec:
<dl class="row">
<dt class="col-sm-3">Address 1:</dt><dd class="col-sm-9">{{ client.address1|default_if_none:" " }}</dd>
<dt class="col-sm-3">Address 2:</dt><dd class="col-sm-9">{{ client.address2|default_if_none:" " }}</dd>
<dt class="col-sm-3">Town:</dt><dd class="col-sm-9">{{ client.town|default_if_none:" " }}</dd>
<dt class="col-sm-3">County:</dt><dd class="col-sm-9">{{ client.county|default_if_none:" " }}</dd>
<dt class="col-sm-3">Postcode:</dt><dd class="col-sm-9">{{ client.postcode|default_if_none:" " }}</dd>
<dt class="col-sm-3">Telephone1:</dt><dd class="col-sm-9">{{ client.telephone1|default_if_none:" " }}</dd>
<dt class="col-sm-3">Telephone2:</dt><dd class="col-sm-9">{{ client.telephone2|default_if_none:" " }}</dd>
<dt class="col-sm-3">Email:</dt><dd class="col-sm-9">{{ client.email|default_if_none:" " }}</dd>
</dl>
Note: j'ai essayé de forcer un espace en cas de création d'une ligne. J'aurais pensé que l'espacement des lignes aurait été défini par dt, ce qui, selon moi, devrait toujours exister et ne devrait jamais être vide?
3 Réponses :
Il suffit de définir une hauteur-min pour chaque élément dd comme ceci:
dd {
min-height: 25px;
}
Cela ne fonctionne pas vraiment sans un hack. Voir ma solution ci-dessous (ci-dessus).
J'ai donc réussi à résoudre ce problème, même si cela ressemble à un hack et je suis surpris que Bootstrap ne l'ait pas maîtrisé. En utilisant la réponse ci-dessus (dont j'avais déjà essayé une variante), je me suis retrouvé avec:
dd.col-sm-9 {
min-height: 25px;
}
Parce qu'une déclaration dd soignée donne:
vous pouvez essayer ceci:
dl dd:after {
content: "\200b";
}
qui est un espace de largeur 0px et ne créera pas de nouvelle ligne