自举导航条链接的检测失败，并且超薄

在我的导航应用程序中，使用bootstrap3设置样式，我决定切换Slim而不是现有的ERB。当我将erb视图文件转换为slim时，我注意到navbar链接的样式消失了。自举导航条链接的检测失败，并且超薄

# app/views/layouts/_navbar.html.slim 
nav.navbar.navbar-default 
    .container 
    .navbar-header.navbar-left 
     button(type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse") 
     span.sr-only Toggle navigation 
     span.icon-bar 
     span.icon-bar 
     span.icon-bar 
     a.navbar-brand href="/" Foody 

    .collapse.navbar-collapse.navbar-right#bs-navbar-collapse 
     ul.nav.navbar-nav 
     - if user_signed_in? 
      li = link_to current_user.email, edit_user_registration_path 
      li = link_to 'New Recipe', new_recipe_path 
      li = link_to 'Sign Out', destroy_user_session_path, method: :delete, confirm: "Are you sure?" 
     - else 
      li = link_to 'Sign In', new_user_session_path 
      li = link_to 'Sign Up', new_user_registration_path 

     span.clearfix

这里是原始文件我从转换：

# app/views/layouts/_navbar.html.erb 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header navbar-left"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/">Foody</a> 
    </div> 
    <div class="collapse navbar-collapse navbar-right" id="bs-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <% if user_signed_in? %> 
      <li><%= link_to current_user.email, edit_user_registration_path %></li> 
     <li><%= link_to 'New Recipe', new_recipe_path %></li> 
      <li><%= link_to 'Sign Out', destroy_user_session_path, method: :delete, confirm: "Are you sure?" %></li> 
     <% else %> 
      <li><%= link_to 'Sign In', new_user_session_path %></li> 
      <li><%= link_to 'Sign Up', new_user_registration_path %></li> 
     <% end %> 
     </ul> 
    </div> 
    <span class="clearfix"></span> 
    </div> 
</nav>

这里的结果都正常&响应模式

enter image description here

这里的输出（对不起为复杂）

<div class="collapse navbar-collapse navbar-right" id="bs-navbar-collapse"> 
<ul class="nav navbar-nav"></ul><li><a href="https://stackoverflow.com/users/sign_in">Sign In</a></li> 
<li><a href="https://stackoverflow.com/users/sign_up">Sign Up</a></li><span class="clearfix"></span>

我在哪里做错了？

来源

2014-05-24 ekremkaraca

您可以在发生问题之前/之后共享生成的html吗？ –

@GraemeMcLean问题已更新 – ekremkaraca

谢谢 - 这是来自ERB还是Slim？我们真的需要看到两者，并且让你看到差异在哪里。 –

缩进失败bagan ul.nav.navbar-nav后引起的问题。需要更多苗条实践。特别感谢Graeme！

nav.navbar.navbar-default 
    div.container 
    div.navbar-header.navbar-left 
     button(type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse") 
     span.sr-only Toggle navigation 
     span.icon-bar 
     span.icon-bar 
     span.icon-bar 
     a.navbar-brand href="/" Foody 
    div.collapse.navbar-collapse.navbar-right#bs-navbar-collapse 
     ul.nav.navbar-nav 
     - if user_signed_in? 
      li = link_to current_user.email, edit_user_registration_path 
      li = link_to 'New Recipe', new_recipe_path 
      li = link_to 'Sign Out', destroy_user_session_path, method: :delete, confirm: "Are you sure?" 
     - else 
      li = link_to 'Sign In', new_user_session_path 
      li = link_to 'Sign Up', new_user_registration_path 
    span.clearfix

来源

2014-05-26 09:30:47 ekremkaraca

自举导航条链接的检测失败，并且超薄

回答

相关问题