引导导航栏链接的检测失败并显示苗条答案

【问题标题】：detection of bootstrap navbar links fails with slim引导导航栏链接的检测失败并显示苗条
【发布时间】：2014-05-24 10:20:34
【问题描述】：

在我使用 bootstrap3 样式的 rails 应用程序中，我决定切换 Slim 而不是现有的 ERB。当我将 erb 视图文件转换为 slim 时，我注意到导航栏链接的样式消失了。

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

这是正常模式和响应模式的结果

这里是输出（抱歉复杂）

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

我哪里做错了？

【问题讨论】：

你能分享在问题出现之前/之后生成的html吗？
@GraemeMcLean 问题已更新
谢谢 - 这是来自 ERB 还是 Slim？我们真的需要看到两者，并让您展示差异在哪里。
@GraemeMcLean 输出来自 Slim，但正如我所见，ul.nav.navbar-nav 下的lis 处于同一级别，而不是应该在ul 下。这就是问题所在，可能......

标签： twitter-bootstrap ruby-on-rails-4 twitter-bootstrap-3 slim-lang

【解决方案1】：

ul.nav.navbar-nav 之后的缩进失败 bagan 导致问题。 Slim 需要更多练习。特别感谢 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

【讨论】：