2013-08-17 13 views
27

Próbuję utworzyć prosty pasek nawigacyjny w Bootstrap 3, który nie zwija się - reakcja nie jest konieczna, ponieważ mamy po prostu prosty tytuł po lewej stronie + przycisk prawo.Najlepszy sposób użycia Bootstrap 3 Navbar bez responsywnego zwijania

Moim celem jest, aby przyciski tytułu + zawsze wyglądały tak samo dla wszystkich rozdzielczości. Coś takiego:

<div class="navbar navbar-fixed-top"> 

    <form class="navbar-form navbar-right"> 
     <button class="btn btn-default">Button 1</button> 
     <button class="btn btn-default">Button 2</button> 
    </form> 

    <a class="navbar-brand" href="#">Title Here</a> 

</div> 

próbowałem liczne kombinacje z documentation. I this post outlines how to use the new .nav-header classes. Próbowałem już duplikować elementy wewnątrz .nav-header - i próbowałem także przesłonić style zapytań o media BS3.

Czy jest łatwiejszy sposób używania paska nawigacyjnego bez zwijania?

Odpowiedz

55

Najlepszym sposobem udało mi się znaleźć jest użycie 2 navbar-header pojemników, a następnie użyj pull-left i pull-right ponieważ nie są związane z żadnym reagujących zapytaniami mediów ..

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-header pull-left"> 
     <a class="navbar-brand" href="#">Title Here</a> 
    </div> 
    <div class="navbar-header pull-right"> 
     <button type="button" class="btn btn-default navbar-btn">Button 1</button> 
     <button type="button" class="btn btn-default navbar-btn">Button 2</button> 
    </div> 
</div> 

Demo na Bootply: http://bootply.com/74912

+2

Działa świetnie - dziękuje za sugestię klasy .navbar-btn też – Ender2050

+0

Dziękuję. To było bardzo przydatne. – TheHippo

+0

Dzięki! To naprawdę pomogło! Najprostsze rozwiązanie, jakie mogłem znaleźć! – nex

1

W moim przypadku użyłem tylko navbar-header i nic więcej.

Zasadniczo nagłówek nawigacji pomoże mi z łatwością uzyskać tam wszystkie nagłówki css. Wewnątrz niego dodałem pojemnik i bawiłem się z moimi opcjami na podobny przypadek jak twój.