0
작은 Sinatra 앱을 만들려고합니다. 현재 부트 스트랩을 사용하여 조건부 탐색 모음을 설정하려고합니다. navbar-right를 사용하여 오른쪽에 가입/로그인/로그 아웃 링크를 표시하려고하지만 올바르게 작동하지 않습니다. 모든 것을 왼쪽에 보여줍니다. 네비게이션 바에 대한 나의 코드는navbar-right가 부트 스트랩 탐색에서 응답하지 않습니다.
이
<!-- Collect the nav links, forms, and other content for toggling -->
<div >
<!-- Main nav bar -->
<ul class="navbar-right nav navbar-nav">
<% if logged_in? %>
<li>
<a href="/user/tips">User's tips</a>
</li>
<li>
<a href="/tips/new">New Tip</a>
</li>
<li>
<a href="/logout"> Sign out</a>
</li>
<% else %>
<li>
<a href="/signup">Sign Up</a>
</li>
<li>
<a href="/login">Sign In</a>
</li>
<% end %>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
팁 코딩 .. 다음과 같은
I 사용자 정의 스타일 아래처럼 보이는 내 네비게이션 바로도 추가있는 style.css ..
./*///// NAVBAR ////*/
/* while header */
.navbar-default { background-color: #111111; border-color: transparent; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; font-weight: 300; letter-spacing: 1px; font-size: 5em; /* while fixed */ }
.navbar-default .navbar-header .navbar-brand { font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px; }
.navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .navbar-header .navbar-toggle {font-family: 'Arial', 'sans-serif'; font-size: 1em; color: #31002e; font-weight: 200; text-transform: uppercase; padding: 20px 25px;}
.navbar-default .nav > li > a { font-family: 'Arial', 'sans-serif'; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; font-weight: 200; color: #31002e; padding: 20px 25px; }
.navbar-default .nav > li > a:focus { color: #FF0000; }
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #FF0000; }
.navbar-default .nav > li.active > a { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:focus { color: #FF0000; background-color: #111111; }
.navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: #111111; }
.navbar-default .nav > li > a.selected { color: #fff; background-color: black;}
.navbar-default .affix { background-color: #111111; }
.navbar-default .affix .navbar-header .navbar-brand:hover, .navbar-default .affix .navbar-header .navbar-brand:focus { color: #FF0000; }
.navbar-default .affix .nav > li.active > a { color: #FF0000; }
.navbar-default .affix .nav > li.active > a:focus { color: #FF0000; }
.navbar-default .affix .nav > li > a:hover, .navbar-default .affix .nav > li > a:active, .navbar-default .affix .nav > li > a:focus, .navbar-default .affix .nav > li > a:focus:hover { color: #FF0000; }
이 문제를 해결하기위한 제안이 있으십니까?
:
pull-right
클래스 여기에 소스를 찾을 수 있습니다 정말 고마워. 정말 매력처럼 일 했어! 나는 끌어 당기고 당기는 것에 대해 전혀 몰랐다. 나는 너의 도움에 정말로 감사한다. –@HimaChhag 도와 드리겠습니다. –