Ruby on rails 语义UI菜单链接不可单击_Ruby On Rails_Less_Semantic Ui

Ruby on rails 语义UI菜单链接不可单击

ruby-on-rails less

Ruby on rails 语义UI菜单链接不可单击,ruby-on-rails,less,semantic-ui,Ruby On Rails,Less,Semantic Ui,嘿，我一直在为一个有Rails v4.1.2、Ruby v2.2.2和gem-less-Rails-semantic_ui的项目工作到目前为止，我的布局如下所示： <!DOCTYPE html> <html> <head> <title>Title</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-

嘿，我一直在为一个有Rails v4.1.2、Ruby v2.2.2和gem-less-Rails-semantic_ui的项目工作

到目前为止，我的布局如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
<body>
  <div id="wrapper">
    <div id="menu-bar" class="ui vertical menu">
      <%= link_to 'Dashboard', :dashboard, id: 'dashboard-link', class:(current_page?(:dashboard) ? 'active item' : 'item') %>
      <%= link_to 'Wiki', :wiki, id: 'wiki-link', class: (current_page?(:wiki) ? 'active item' : 'item') %>
    </div>
    <div id="content">
    //content here, cut out
    </div>
  </div>
</body>
</html>

咖啡脚本根本就没有提到这一点。但是，菜单链接（如dashboard和wiki）不可单击。我尝试将活动项添加到链接周围的div中。然而，这些链接仍然是不可点击的。使用F12查看html时，链接会正确生成，并显示为完全不可单击，显示为黑色，光标位置不变，单击时不会发生任何事情。

如果从less文件的菜单栏中删除z-index:-999？链接是否可见且可点击？是的。非常感谢。

//*= require semantic_ui/semantic_ui

@errorColor: hsl(359, 100%, 50%);
@infoColor: hsl(119, 100%, 62%);

.setWidth(@amount) {
  min-width: @amount;
  max-width: @amount;
  width: @amount;
}

.setHeight(@amount) {
  min-height: @amount;
  max-height: @amount;
  height: @amount;
}

.ui .nag .fatal {
  .title {
    color: darken(@errorColor, 20%);
 }
 background-color: errorColor;
 border-color: lighten(@errorColor, 20%);
}

.ui .nag .error {
  .title {
    color: darken(@errorColor, 10%);
  }
  background-color: errorColor;
  border-color: lighten(@errorColor, 30%);
 }

.ui .nag .info {
  .title {
    color: darken(@infoColor, 20%);
  }
  background-color: infoColor;
  border-color: lighten(@infoColor, 20%);
}

.ui .nag .alert {
   .title {
     color: darken(@infoColor, 10%);
   }
   background-color: infoColor;
   border-color: lighten(@infoColor, 30%);
}

#wrapper {
  .setWidth(100%);
 .setHeight(100%);
}

#menu-bar {
  position: fixed;
  z-index: -999;
  .setWidth(10%);
  .setHeight(100%);
  float: left;
}

#content {
  .setWidth(89%);
  float: right;

  #flashes {
    .setWidth(100%);
    .setHeight(20%);
  }

  #yielded-content {
    .setWidth(100%);
    .setHeight(79%);
  }
}