J'essaie de créer une petite application Sinatra. Actuellement, essayez de configurer une barre de navigation conditionnelle à l'aide de bootstrap. J'essaie d'utiliser navbar-right pour afficher les liens d'inscription/de connexion/déconnexion sur le côté droit, mais cela ne fonctionne pas correctement. Il montre juste tout à gauche. Mon code barre de navigation ressemble ci-dessous ..navbar-right ne répond pas dans la navigation bootstrap
codage Conseils
<!-- Collect the nav links, forms, and other content for toggling -->
<div >
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav">
<% if logged_in? %>
<li>
<a href="/user/tips">User's tips</a>
</li>
<li>
<a href="/tips/new">New Tip</a>
</li>
<li>
<a href="/logout"> Sign out</a>
</li>
<% else %>
<li>
<a href="/signup">Sign Up</a>
</li>
<li>
<a href="/login">Sign In</a>
</li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Je style.css également ajouté au style personnalisé ma barre de navigation, qui ressemble à ci-dessous ..
./*///// NAVBAR ////*/
/* while header */
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ }
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; }
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;}
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px; }
.navbar-default .nav > li > a:focus { color: #FF0000; }
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; }
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; }
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;}
.navbar-default .affix { background-color: #111111; }
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .affix .nav > li.active > a { color: #FF0000; }
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; }
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; }
Une suggestion pour résoudre ce problème?
Merci beaucoup .. ça a vraiment marché comme un charme! Je n'avais aucune idée de tirer-droit et tirer-gauche. J'apprécie vraiment ton aide. –
@HimaChhag Je suis heureux d'aider. –