Bootstrap Sidenav风格

Question

我正在开发一个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)：

.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;
    }
  }
}

我还包含了标准的bootstrap.css和bootstrap-responsive.css。有人知道为什么会发生这种事吗。我的看起来很薄。我的输出如下所示：

​

​

Answer 1

代码看起来是正确的。你有没有试过检查这个元素？(右键单击>检查)。这可能是在你的CSS的某个地方，'a‘标签的填充被重置了。当您检查元素时，您将能够看到填充发生更改的位置。