web-dev-qa-db-fra.com

Impossible de faire flotter un élément de la barre de navigation Twitter avec la classe = pull-right ou float: right

J'utilise Twitter bootstrap et Rails et je n'arrive pas à faire flotter un élément de barre de navigation vers la droite.

J'ai essayé d'utiliser quelque chose comme ça:

<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é de dépasser le flottant css dans bootstrap_and_overrides.css.less et home.html.erb, mais cela n'a pas fonctionné. Firebug a indiqué avoir trouvé deux déclarations float css, mais choisi l'option bootstrap plutôt que la mienne. Je reste donc coincé et je me demande comment personnaliser la barre de navigation. Je fais probablement quelque chose de mal ici, mais je ne le vois pas.

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

Lorsque je charge une page, la barre de navigation s’affiche, mais le dernier élément n’est pas placé à droite.

Ressemble à ça:
Screen capture showing firebug info

Et il y a une autre casquette d'écran ici qui montre quelques informations supplémentaires .

Comme vous pouvez le constater, firebug a trouvé une option "float:right;", mais indique qu’une option "float:left;" a été utilisée à la place.

J'ai un manque de compréhension ici, mais je ne sais pas où.

Veuillez adresser vos réponses à: 

  • Utilisation du formatage de la barre de navigation boot-strap et pull-right de Twitter 
  • Remplacer css 

  • Interprétation de la sortie de firebug

    EDIT: J'ai posté mon tout premier jsfiddle ici: http://jsfiddle.net/uCHQs/2/ Il s'agit d'un copier/coller d'un show source du navigateur. 'et ce que je comprends, c'est la charge css pertinente servie par Rails. 

Merci d'avance!

cssruby-on-railstwitter-bootstrapformattingfirebug
12
Perry Horwich

Je l'ai.

Pour que cela fonctionne, il fallait remplir le conteneur imbriqué dans navbar-inner avec plus d'une liste non ordonnée d'éléments de navigation. Ce jsfiddle m'a montré le chemin http://jsfiddle.net/N6vGZ/4/

Ce code fonctionne:

<div class="container span12">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <%= link_to "Cases", root_path, :class=>"brand"%>
          <ul class="nav">
          <% 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>
          </ul>
           <ul class="nav pull-right"> <li> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li></ul>
          <% else %>
            <ul class="nav">
              <li> <%= link_to 'Login', new_user_session_path %> </li>
              <li> <%= link_to 'Sign up', new_user_registration_path %> </li>
            </ul>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
</div>
21
Perry Horwich

avez-vous essayé d'être plus spécifique avec votre CSS?

.navbar ul.nav li.whoami {
    float:right;
}

Parfois, si le CSS précédent (bootstrap dans ce cas) est très spécifique, il faut le même niveau de spécificité (ou supérieur) pour le remplacer.

Peut-être utile de poster un jsfiddle. Les captures d'écran sont difficiles à déboguer;)

3
Jason

Le code que vous avez écrit est

 class="nav navbar-nav" col-12

Le code ci-dessus peut être remplacé comme ceci

class="nav navbar-nav col-12"

et aussi à l'insertion suivante 

class pull-right in your li button
1
Stefano

Ajouter une nouvelle classe = "rangée"

qu'est-ce qui s'est passé .. dans votre code. quand il arrive dans un appareil mobile, alors div est ajouté à un autre div. C'est une solution simple.

0
ShreeJi
<li><a href="#examples"><span class="glyphicon glyphicon-chevron-right" style="float:right;"></span> Examples</a></li>
0
alpc

Essayez de commenter la ligne

//... REVU

0
Jason