Sto usando Twitter bootstrap e Rails e non riesco a visualizzare un elemento della barra di navigazione a destra.Impossibile spostare un elemento della barra di navigazione di bootstrap su twitter con classe = pull-right o float: right
Ho provato ad utilizzare qualcosa di simile:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... ma il legame rimasto sinistra e Firebug mostrato "float:left;"
Così ho provato a overide il galleggiante css in bootstrap_and_overrides.css.less e in home.html.erb, ma nessuno dei due lavorato. Firebug ha indicato che ha trovato due dichiarazioni float css, ma ha scelto l'opzione bootstrap sulla mia. Quindi rimango bloccato e mi chiedo come personalizzare la barra di navigazione. Probabilmente sto facendo qualcosa di sbagliato qui, ma semplicemente non lo vedo.
Ecco il mio codice:
application.html.erb:
<!DOCTYPE html>
<html>
<head>
... removed to shorten the length of this post
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
_navigation.html.erb:
<div class="container span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<%= link_to "Cases", root_path, :class=>"brand"%>
<% if user_signed_in? %>
<li> <%= link_to "My Cases", cases_path %> </li>
<li> <%= link_to 'Dash', dash_path %> </li>
<% if current_user.has_role? :admin %>
<li> <%= link_to 'Admin', users_path, :id=>"Admin" %> </li>
<% end %>
<li> <%= link_to 'Logout', destroy_user_session_path, :method=>'delete', :id => "Logout" %> </li>
<li class="whoami"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
<% else %>
<li> <%= link_to 'Login', new_user_session_path %> </li>
<li> <%= link_to 'Sign up', new_user_registration_path %> </li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
bootstrap_and_overrides.css.less:
@import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
@import "twitter/bootstrap/responsive";
// Set the correct sprite paths
// ...REMOVED to shorten the length of this post
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;
.whoami {
float:right;
}
Quando Carico una pagina, vedo la barra di navigazione, ma l'ultimo elemento non è flottato a destra.
appare come questa
E c'è un altro tappo schermata qui che mostra some more info.
Come si può vedere, firebug ha trovato un'opzione "float:right;", ma è stata invece utilizzata un'opzione "float:left;".
Ho una lacuna nella comprensione qui, ma non sono sicuro di dove.
Si prega di inviare le risposte a:
- L'utilizzo di pull-destra e twitter barra di navigazione di bootstrap formattazione
- css Overriding
Interpretazione uscita Firebug
EDIT: ho inviato il mio primo mai jsfiddle qui: http://jsfiddle.net/uCHQs/2/ Rappresenta una copia/incolla di un browser 'show source' e ciò che raccolgo è il carico css rilevante e se scavato dalle rotaie.
Grazie in anticipo!
Ho avuto lo stesso problema con la ricerca nella barra di navigazione. Grazie mille! – Bendim