Comment faire un retour à la ligne après un élément twitter bootstrap?
Je m'excuse parce que cela semble être une chose si simple.
Quelle est la bonne façon d'insérer une nouvelle ligne de manière à ce que l'élément suivant soit sur une nouvelle ligne? Il semble que certaines choses le fassent automatiquement (comme <p> within`) mais je vois un comportement où l'élément suivant peut apparaître juste à côté du dernier élément.
HTML:
<ul class="nav nav-tabs span2">
<li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
<li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
<li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
<li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<BR /> <!-- It seems dumb to need this! Is this really how -->
<BR /> <!-- to get a newline? -->
<BR /> <!-- Well, it's what -->
<BR /> <!-- I'm doing now, I suppose... -->
<BR />
<div class="well span6">
<h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>
Quelle est la manière correcte ou élégante de gérer les nouvelles lignes après des choses comme ul ou div? Suis-je surplombant une configuration générale de la le code qui gère cela?
5 réponses
Vous utilisez span6 et span2. Ces deux classes sont" float:left " ce qui signifie, si possible, ils essaieront toujours de s'asseoir l'un à côté de l'autre.
Twitter bootstrap est basé sur un système de grille 12. Donc, vous devriez généralement toujours obtenir le span**#** pour ajouter jusqu'à 12.
E. g.: span4 + span4 + span4 OU span6 + span6 OU span4 + span3 + span5.
Pour forcer un span vers le bas, sans écouter le flotteur précédent, vous pouvez utiliser twitter bootstraps clearfix classe. Pour ce faire, votre code devrait regardez comme ceci:
<ul class="nav nav-tabs span2">
<li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
<li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
<li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
<li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<!-- Notice this following line -->
<div class="clearfix"></div>
<div class="well span6">
<h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>
Je crois que Twitter Bootstrap a une classe appelée clearfix que vous pouvez utiliser pour effacer le flottant.
<ul class="nav nav-tabs span2 clearfix">
Comme KingCronus mentionné dans les commentaires vous pouvez utiliser la classerow pour créer la liste ou le titre sur sa propre ligne. Vous pouvez utiliser la classe row sur l'un ou l'autre des éléments:
<ul class="nav nav-tabs span2 row">
<li><a href="./index.html"><i class="icon-black icon-music"></i></a></li>
<li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li>
<li><a href="./team.html"><i class="icon-black icon-user"></i></a></li>
<li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li>
</ul>
<div class="well span6 row">
<h3>I wish this appeared on the next line without having to gratuitously use BR!</h3>
</div>
Bootstrap 4:
<div class="w-100"></div>
Source: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row
Peut être la solution pourrait être d'utiliser une propriété de remplissage.
<div class="well span6" style="padding-top: 50px">
<h3>I wish this appeared on the next line without having to
gratuitously use BR!
</h3>
</div>