Невозможно поплавать с помощью twart bootstrap navbar прямо с помощью класса = pull-right или float: right

Я использую загрузку Twitter и Rails, и я не могу поплавать с помощью навигационного элемента справа.

Я попытался использовать что-то вроде этого:

<li class="whoami pull-right"> <%= link_to ("Logged in as: " + current_user.name), edit_user_registration_path , :id=>"Edit account"%> </li>

... но ссылка осталась слева, а firebug показал "float:left;"

Поэтому я попытался переопределить float css в bootstrap_and_overrides.css.less и в home.html.erb, но не работал. Firebug указал, что он нашел два оператора css float, но выбрал опцию bootstrap поверх моей. Поэтому я остался застрял и задался вопросом, как настроить навигатор. Я, наверное, здесь что-то не так, но я просто этого не вижу.

Здесь мой код:

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

Когда я загружаю страницу, я вижу навигационную панель, но последний элемент не перемещается вправо.

Похож:

И здесь есть еще одна кепка экрана, которая показывает дополнительную информацию.

Как вы можете видеть, firebug обнаружил параметр "float:right;", но указывает вместо этого параметр "float:left;".

У меня есть пробел в понимании здесь, но я не уверен, где.

Пожалуйста, ответьте на:

Использование форматирования навигационного экрана pull-right и twitter
Переопределение css
Интерпретация вывода firebug

EDIT: Я разместил свой первый jsfiddle здесь: http://jsfiddle.net/uCHQs/2/ Он представляет собой копию/вставку браузера 'show source', и я собираю информацию, которая является релевантной загрузкой css и обслуживается рельсами.

Спасибо заранее!

Ответы

Ответ 1

Получил это.

Чтобы выполнить работу, необходимо заполнить контейнер, вложенный в navbar-inner, с более чем одним неупорядоченным списком элементов nav. Этот jsfiddle показал мне способ http://jsfiddle.net/N6vGZ/4/

Этот код работает:

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

Ответ 2

Вы пытались быть более конкретным с вашим CSS?

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

Иногда, если предыдущий CSS (бутстрап в этом случае) очень специфичен, он требует того же уровня специфичности (или большего), чтобы переопределить его.

Может быть полезно опубликовать jsfiddle. Скриншоты трудно отлаживать;)

Ответ 3

Написанный код u

 class="nav navbar-nav" col-12

Вышеупомянутый код можно заменить следующим образом

class="nav navbar-nav col-12"

а также при следующей вставке

class pull-right in your li button

Ответ 4

Попробуйте прокомментировать строку

//... REMOVED

Ответ 5

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

Ответ 6

Добавить новый класс = "строка"

что произошло в вашем коде. когда он приходит в мобильное устройство, тогда div добавляется к другому div. это простое решение.