Devise CSS Styling

Question

Я настроил свое приложение с помощью навигационной панели разработчика, которая включает мои логин и регистрацию ссылок с правой стороны. Они горизонтальны и имеют размер соответственно, пока я не попытаюсь их стилизовать (чтобы изменить только шрифт и цвет).

Я добавил класс span (чтобы изменить только шрифт и цвет шрифта), и теперь ссылки соединения/регистрации выглядят сложными по вертикали, а не по горизонтали. Кто-нибудь знает, что нужно сделать, чтобы вернуть их в горизонтальное положение?

Это мой диапазон Разрабатывают стиль:

span.deviselinks { 
    font-family: 'Quicksand', sans-serif; 
    color: white; 
    a:link {text-decoration:none; background-color:transparent; color:white;}; 
    a:visited {text-decoration:none;background-color:transparent; color:white;}; 
    a:hover {text-decoration:none;background-color:transparent; color:white;}; 
    a:active {text-decoration:none;background-color:transparent; color:white;}; 

} 

Я использовал это так:

<span class="deviselinks"> 
<% if user_signed_in? %> 
    <li> 
    <%= link_to('Manage Profile', edit_user_registration_path) %> 
    </li> 
<% else %> 
    <li> 
    <%= link_to "Join", "#myRModal", "data-toggle" => "modal" %> 
    </li> 
    </span> 

Это сегмент моей навигационной панели:

<ul class="nav navbar-nav navbar-right"> 
     <% if user_signed_in? %> 
     Hello <%= current_user.first_name %> 
     <%= link_to "Sign out", destroy_user_session_path, :method => :delete %> 
     <% else %> 
     <%= render "devise/shared/registration_items" %> 
     <%= render "devise/shared/login_items" %> 
     <% end %> 
     </ul> 

I попробовал Макс предложение с:

<% if user_signed_in? %> 
    <li class="deviselinks"> 
    <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>  

    </li> 
<% else %> 
    <li class="deviselinks"> 

    <%= link_to 'Login', "#myLModal", 'data-toggle' => "modal" %> 
    </li> 

Он не подбирает ни один из элементов дизайна, похожих на deviselinks.

Спасибо вы

Answer 1

Регулярно проверяйте самозагрузки источник, например, здесь: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_navs.scss

It стили li S через .nav > li, что означает, что li должен быть прямым потомком вашего ul.nav для стилей Bootstrap, чтобы применить. Таким образом, самым простым решением было бы добавить deviselink класс к каждому из li с вместо заворачивая их в span:

<!-- span --> 
    <% if user_signed_in? %> 
    <li class="deviselink"> 
     <%= link_to('Manage Profile', edit_user_registration_path) %> 
    </li> 
    <% else %> 
    <li class="deviselink"> 
     <%= link_to "Join", "#myRModal", "data-toggle" => "modal" %> 
    </li> 
    <% end %> 
<!-- /span --> 

Answer 2

Лучше бы попробовать и добавить float: right или left к вашему CSS.

Answer 3

У вас есть ваши бары фиксированного размера? Проводка вашего CSS-навигатора поможет. Возможно, ваш шрифт изменил размер ящиков, что сделало их несовместимыми в пространстве меню по горизонтали, чтобы они укладывались вертикально.

Answer 4

Вы должны добавить ссылки в div с обеими ссылками с float: left, тогда ссылка появится горизонтально.