Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right

Question

I am using Twitter bootstrap and Rails and I can\'t seem to float a navbar item to the right.

I tried using something like this:

Answer 1

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

Answer 2

The code u have written is

 class="nav navbar-nav" col-12

The above code can be replaced like this

class="nav navbar-nav col-12" 

and also at next insert

class pull-right in your li button

Answer 3

Try commenting out the line

//...REMOVED

Answer 4

have you tried being more specific with your CSS?

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

Sometimes if the prior CSS (bootstrap in this case) is very specific, it requires the same level of specificity (or greater) to override it.

Might be helpful to post a jsfiddle. Screenshots are difficult to debug ;)

Answer 5

Got it.

Getting it to work required filling the container nested in navbar-inner with more than one unordered list of nav elements. This jsfiddle showed me the way http://jsfiddle.net/N6vGZ/4/

This code works:

<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>

Answer 6

Add new class = "row"

what's happened ..in your code . when it is coming in mobile device then div is append on other div . this is simple solution .