Ruby on Rails link_to 弄乱了侧边栏列表元素的对齐方式答案

【问题标题】：Ruby on Rails link_to messes up sidebar list elements alignmentRuby on Rails link_to 弄乱了侧边栏列表元素的对齐方式
【发布时间】：2017-03-14 08:38:54
【问题描述】：

添加时：

<%= link_to("Lessons",
  {:controller => 'welcome',
    :action => 'lessons'
  }) %>

它在我的侧边栏上创建了一个新行。该链接应与地球图标位于同一行（地球图标位于正确位置）。其他链接看起来是正确的，因为我没有向它们添加 ruby 链接，以显示没有 ruby 链接时它们的外观。

参考导航栏： http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/

我正在使用页面底部的固定宽度响应式侧边栏。

HTML 模板：

<!DOCTYPE html>
<html>
<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>


  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>


<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Kids Typing Club</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class=""><a href="#"></a></li>
        <li><a href="#about"></a></li>
        <li><a href="#contact"></a></li>
      </ul>
    </div><!--/.nav-collapse -->
</div><!--/.navbar -->

<div class="row-offcanvas row-offcanvas-left">
  <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#">Home</a></li>
          <li><a><i class="fa fa-globe fa-lg"></i>
                <%= link_to("Lessons",
                  {:controller => 'welcome',
                    :action => 'lessons'
                  }) %>  
          </a></li>
          <li><a><i class="fa fa-user fa-lg"></i>
          Profile
          </a></li>
          <li><a><i class="fa fa-users fa-lg"></i>
          Users
          </a></li>
          <li><a><i class="fa fa-envelope fa-lg"></i>
          Contact
          </a></li>
          <li><a><i class="fa fa-question-circle fa-lg"></i>
          Help
          </a></li>


        </ul>
      </div>
  </div>
  <div id="main">
      <div class="col-md-12">
          <p class="visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
          </p>
          <h2>Fixed + Fluid Bootstrap Template with Off-canvas Sidebar</h2>
          <div class="row">
              <div class="col-md-12"><div class="well"><p>Shrink the browser width to make the sidebar collapse off canvase.</p></div></div>
          </div>
          <div class="row">
              <div class="col-md-4"><div class="well"><p>4 cols</p></div></div>
              <div class="col-md-4"><div class="well"><p>4 cols</p></div></div>
              <div class="col-md-4"><div class="well"><p>4 cols</p></div></div>
          </div>
          <div class="row">
              <div class="col-lg-6 col-sm-6"><div class="well"><p>6 cols, 6 small cols</p></div></div>
              <div class="col-lg-6 col-sm-6"><div class="well"><p>6 cols, 6 small cols</p></div></div>
          </div>
          <div class="row">
              <div class="col-lg-4 col-sm-6"><div class="well">4 cols, 6 small cols</div></div>
              <div class="col-lg-4 col-sm-6"><div class="well">4 cols, 6 small cols</div></div>
              <div class="col-lg-4 col-sm-12"><div class="well">4 cols, 12 small cols</div></div>
          </div>
      </div>
  </div>
</div><!--/row-offcanvas -->






<%= yield %>

</body>
</html>

CSS 文件：

// Place all the styles related to the Welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//navbar css below
body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}
#main {
  height:100%;
  overflow:auto;
}

/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }

  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}

//navbar sidebar css ends ^





//self-created CSS:

.navbar-brand{
  color: white !important;
}

.navbar-custom{
  background-color: #5BC0DE !important;
  background: #5BC0DE !important;
}

#sidebar .active a{
  background-color: #5BC0DE !important;
}

Javascript 文件：

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

输出：

【问题讨论】：

标签： css ruby-on-rails ruby twitter-bootstrap sidebar

【解决方案1】：

这应该可以解决您的问题

<li><%= link_to({:controller => 'welcome',
                :action => 'lessons'
              }) do %>  
<i class="fa fa-globe fa-lg"></i> Lessons
<% end %>
</li>

【讨论】：

我刚刚使用了你的代码块。对齐方式已修复，但地球图标（蓝色）已更改为浅灰色。
我刚刚注意到，除了图标之外，它还将“Lessons”的字体从蓝色更改为灰色。 gyazo.com/61c8f27ed4c723011853546e6705b817
@Dpet123 好的，将鼠标移到图标上。右键单击并选择检查元素。 Mozilla/chrome 调试器控制台打开。在右边你有css样式，你可以找到那个图标的颜色或背景颜色并改变它。那么你需要复制类或为图标设置一个id并修复它。
我从家中取出了活动，而另一个没有活动。我更改了 css 中的 a:visited 元素，文本是正确的颜色。然而，现在我在左上角的品牌也变成了蓝色。它不是在阅读我的“navbar-brand{ color: white !important}
你是对的。我没有注意到这一点。添加 rails 链接似乎会将字体颜色从蓝色更改为灰色。很有趣。

【解决方案2】：

谢谢@Fabrizio Bertoglio。使用他提供的信息，我添加了这个 css：

.menuitems > a:visited {
  color: #337AB7 !important;
}

.active { 
  background-color: white;
}

.navbar-brand {
  color: white !important;
}

我将菜单项作为一个类添加到每个链接。这允许我的 navbar-brand 类规则不会被 a:visited 覆盖（因为它适用于所有这些规则）。如果不将规则应用于特定的 menuitem，我的 navbrand 字体颜色将不会更改为所需的颜色。

@Fabrizio Bertoglio 解决了链接对齐问题：

<li><%= link_to({:controller => 'welcome',
                :action => 'lessons'
              }) do %>  
<i class="fa fa-globe fa-lg"></i> Lessons
<% end %>
</li>

【讨论】：