0
我正在尝试创建一个小的Sinatra应用程序。目前,试图在bootstrap的帮助下建立一个条件导航栏。我正在尝试使用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>
我也加入到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; }
有没有解决这个问题的建议?
非常感谢..它真的很有魅力!我不知道拉右和左拉。我非常感谢你的帮助。 –
@HimaChhag我很乐意提供帮助。 –