Jak poprawnie usunąć pływaki w bootstrapie twitter?

Question

Właśnie zacząłem się uczyć twitter bootstrap i zastanawiałem się, jaka jest właściwa metoda, aby oczyścić z niego pływaki.

Normalnie bym po prostu zrobić coś takiego:

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; 
} 

proszę ignorować infrastruktury wyżej jak to tylko przykład.

Teraz powiedz w bootstrap, jeśli próbuję unieść jakiś tekst obok sekcji nawigacji, jaki jest właściwy sposób na zrobienie tego?

Rozważmy następujący przykład w 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> 

Ja chce się unosić pole contact obok pola navbar.

Czytałem o klasie bootstrap .clearfix, czy stosuję to po prostu tak, jak to zrobiłem powyżej (po floats)? .... czy powinienem zastosować tę klasę do czegoś innego?

Answer 1

Musisz wykorzystać odpowiednie klasy bootstrap. Jeśli wewnątrz kontenera (prawdziwy kontener Bootstrap) potrzebny jest rząd, aby zrównoważyć wypełnienie.

<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 ma pull-left i pull-right już unosić treści. clearfix nie powinny być potrzebne, jeśli korzystasz z pojemnika/rzędu.

Realistycznie można również (lub zamiast tego) używać narzędzi sieciowych w menu nawigacyjnym/kontaktowym.