web-dev-qa-db-fra.com

Comment créer une nouvelle ligne après un élément Twitter bootstrap?

Je m'excuse car 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ù le prochain élément 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 façon correcte ou élégante de gérer les retours à la ligne après des choses comme ul ou div? Suis-je en train de négliger une configuration générale du code qui gère cela?

htmltwitter-bootstrapcss-floathtml-listsclearfix
32
Danny

Vous utilisez span6 et span2. Ces deux classes sont "float:left "ce qui signifie, si possible, ils essaieront toujours de s'asseoir les uns à côté des autres. Twitter bootstrap est basé sur un système à 12 grilles. Donc, vous devriez généralement toujours obtenir le span**#** pour ajouter jusqu'à 12.

Par exemple.: span4 + span4 + span4 OR span6 + span6 OR span4 + span3 + span5.

Pour forcer une étendue, cependant, sans écouter le flottant précédent, vous pouvez utiliser la classe clearfix de bootstraps Twitter. Pour ce faire, votre code devrait ressembler à 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>
53
Alexander Wigmore

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">
13
Christofer Eliasson

Comme KingCronus mentionné dans les commentaires vous pouvez utiliser la classe row pour faire la liste ou l'en-tête sur sa propre ligne. Vous pouvez utiliser la classe de ligne sur l'un ou les deux é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>
5
WhiteKnight

Bootstrap 4:

<div class="w-100"></div>

Source: https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row

2
MixerOID

L'utilisation d'éléments br est très bien, et tant que vous n'avez pas besoin de beaucoup d'espace entre les éléments, c'est en fait une chose logique à faire car n'importe qui peut lire votre code et comprendre quelle logique d'espacement vous utilisez.

L'alternative consiste à créer une classe personnalisée pour les espaces blancs. Dans bootstrap 4 vous pouvez utiliser

<div class="w-100"></div>

pour faire une ligne vide sur la page, mais ce n'est pas différent d'utiliser le <br> tag. L'inconvénient de créer une classe personnalisée pour les espaces blancs est qu'il peut être difficile de lire pour les autres personnes qui consultent votre code. Une classe personnalisée appliquerait également la même quantité d'espace blanc chaque fois que vous l'utilisez, donc si vous vouliez différentes quantités d'espace blanc sur la même page, vous devrez créer plusieurs classes d'espace blanc.

Dans la plupart des cas, il est simplement plus facile d'utiliser <br> ou <div class="w-100"></div> dans un souci de facilité et de lisibilité. ça n'a pas l'air joli, mais ça marche.

1
to240

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>
0
Fabrizzio