Ruby on rails 引导式侧导航样式

我正在开发一个ruby应用程序，我正在尝试制作一个sidenav，它看起来与官方bootstrap网站上使用的一模一样，如下所示：

我的sidenav代码：

.row-fluid
  .span3
    %ul.nav.nav-list.sidenav
      %li
        %a{:href => "#download-bootstrap"}
          %i.icon-chevron-right
          Download
      %li
        %a{:href => "#file-structure"}
          %i.icon-chevron-right
          File structure
      %li
        %a{:href => "#contents"}
          %i.icon-chevron-right
          What's included
      %li
        %a{:href => "#html-template"}
          %i.icon-chevron-right
          HTML template
      %li
        %a{:href => "#examples"}
          %i.icon-chevron-right
          Examples
      %li
        %a{:href => "#what-next"}
          %i.icon-chevron-right
          What next?

以及我的css（scss）代码：

我还包括标准的

bootstrap.css

和

bootstrap-responsive.css

。有人知道为什么会这样吗。我的看起来很薄。我的输出如下所示：

---

代码似乎是正确的。你试过检查这个元件吗？（右键单击>检查）。可能是CSS中某个地方的“a”标记的填充被重置。当您检查元素时，您将能够看到填充在哪里发生了变化。

我发现，当我使用gem'less rails'gem'twitter bootstrap rails'gems时，它可以工作，但我更喜欢使用gem'less rails bootstrap'，它不工作。知道为什么吗？

.sidenav {
  width: 207px;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  > {
    li {
      > a {
        display: block;
        width: 190px \9;
        margin: 0 0 -1px;
        padding: 8px 14px;
        border: 1px solid #e5e5e5;
      }
      &:first-child > a {
        -webkit-border-radius: 6px 6px 0 0;
        -moz-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
      }
      &:last-child > a {
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
      }
    }
    .active > a {
      position: relative;
      z-index: 2;
      padding: 9px 15px;
      border: 0;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.1);
    }
  }
  .icon-chevron-right {
    float: right;
    margin-top: 2px;
    margin-right: -6px;
    opacity: .25;
  }
  > li > a:hover {
    background-color: #f5f5f5;
  }
  a:hover .icon-chevron-right {
    opacity: .5;
  }
  .active {
    .icon-chevron-right, a:hover .icon-chevron-right {
      background-image: url(../img/glyphicons-halflings-white.png);
      opacity: 1;
    }
  }
}