我正在开发一个 ruby 应用程序，我正在尝试制作一个与官方引导网站上使用的完全一样的 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包括在内。有谁知道为什么会这样。我的好像很薄。我的输出看起来像：
