Bootstrap Sidenav风格

Question

我正在开发一个ruby应用程序，我正在尝试制作一个看起来与官方bootstrap网站上使用的sidenav完全相同的sidenav：

我的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

代码似乎正确。你试过检查元素了吗？ （右键单击＆gt;检查）。可能是在CSS的某个地方，'a'标签的填充正在重置。检查元素时，您将能够看到填充变化的位置。