Impossible de faire flotter un élément de barre de navigation Twitter bootstrap à droite avec soit class = pull-right ou float: right
Je suis en utilisant Twitter bootstrap et les Rails et je n'arrive pas à faire flotter un élément de la barre de navigation à droite.
J'ai essayé d'utiliser quelque chose comme ceci:
<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>
... mais le lien est resté à gauche et firebug a montré "float:left;"
J'ai donc essayé d'annuler la propriété css float dans bootstrap_and_overrides.css.less
et dans home.html.erb
mais ni travaillé. Firebug a indiqué qu'il a trouvé deux css float états, mais il a choisi le bootstrap option sur la mienne. Donc, je suis resté coincé et je me demandais comment personnaliser la barre de navigation. Je suis probablement fait quelque chose de mal ici, mais je n'ai juste pas le voir.
Voici mon code:
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.moins:
@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;
}
Lorsque je charge une page, je vois la barre de navigation, mais le dernier élément n'est pas lancée vers la droite.
Ressemble à ceci:
Et il y a une autre capture d'écran qui montre quelques infos.
Comme vous pouvez le voir, firebug trouvé un "float:right;"
option, mais indique une "float:left;"
option a été utilisée à la place.
J'ai une lacune dans la compréhension ici, mais je ne suis pas sûr de l'endroit où.
Veuillez adresser les réponses à:
- Utilisation de pull-droit et twitter bootstrap barre de navigation de mise en forme
- Primordial css
- L'interprétation de firebug sortie
EDIT:
J'ai posté mon premier jsfiddle ici: http://jsfiddle.net/uCHQs/2/
Il représente un copier/coller d'un navigateur "afficher la source" et de ce que je comprends est la corporation de charge css et servi par les rails.
Merci d'avance!
source d'informationauteur Perry Horwich
Vous devez vous connecter pour publier un commentaire.
Obtenu.
Faire le travail nécessaire de remplissage du conteneur imbriquée dans la navbar-inner avec plus d'une liste non ordonnée de la valeur liquidative des éléments. Cette jsfiddle m'a montré le chemin http://jsfiddle.net/N6vGZ/4/
Ce code fonctionne:
avez-vous essayé d'être plus précis avec votre CSS?
Parfois si l'état de la CSS (bootstrap dans ce cas) est très spécifique, il exige le même niveau de spécificité (ou plus) pour le remplacer.
Pourrait être utile de publier un jsfiddle. Les captures d'écran sont difficiles à déboguer 😉
Le code u ont écrit est
Le code ci-dessus peut être remplacé comme ce
et également lors de la prochaine insertion
Essayer commentant la ligne
//...SUPPRIMÉ
Ajouter de nouveaux class = "row"
ce qui s'est passé ..dans votre code . quand elle est venue dans l'appareil mobile puis div est ajouter sur les autres div .
c'est la solution la plus simple .