web-dev-qa-db-fra.com

Comment effacer correctement les floats dans le bootstrap de Twitter?

Je viens juste de commencer à apprendre Twitter bootstrap Et je me demandais quelle était la bonne méthode pour effacer les flottants avec.

Normalement, je ferais juste quelque chose comme ça:

HTML:

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

CSS:

.clear {
    clear: both;
}

.main {
    float: left;
}

.sidebar {
    float: right;
}

Veuillez ignorer l'infrastructure de ce qui précède, car il ne s'agit que d'un exemple.

Maintenant, dites dans bootstrap si j'essaie de placer du texte à côté d'une section de navigation, quelle est la bonne façon de le faire?

Considérons cet exemple dans bootstrap:

<div class="main_container">

    <header id="main_header" class="col-md-12">

        <nav class="navbar navbar-default" role="navigation">

        </nav>

        <div class="contact">

        </div>        

    </header>
</div>

Je souhaite faire flotter le champ contact à côté du champ navbar.

J'ai lu sur la classe .clearfix De bootstrap, est-ce que je l'applique comme je l'ai fait ci-dessus (après les flottants)? .... ou devrais-je appliquer la classe à autre chose?

csstwitter-bootstraptwitter-bootstrap-3
43
Brett

Vous devez utiliser les classes bootstrap) appropriées. Si vous vous trouvez dans un conteneur (un conteneur true Bootstrap)), vous devez disposer d'une ligne pour décaler le remplissage.

<div class="container">
<div class="row">

        <header id="main_header" class="col-md-12">

            <nav class="navbar navbar-default" role="navigation">

            </nav>

            <div class="contact pull-left">

            </div>        

        </header>
</div>
</div>

Bootstrap a pull-left et pull-right déjà flotter le contenu. clearfix ne devrait pas être nécessaire si vous utilisez un conteneur/une ligne.

De manière réaliste, vous pouvez également (ou à la place) utiliser les utilitaires de grille sur le navigateur/contact.

43
Aibrean