CSS Bootstrap 中的垂直菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8381965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical Menu in Bootstrap
提问by redGREENblue
Is there a way to create a vertical menu (not dropdown, entirely separate vertical menu on sidebar) by using any bootstrap class? I can create one using my css, but just want to know if there is any builtin class for this in bootstrap, or can it be done using the top-bar with any hack?
有没有办法使用任何引导程序类创建垂直菜单（不是下拉菜单，侧边栏上完全独立的垂直菜单）？我可以使用我的 css 创建一个，但只想知道在引导程序中是否有任何内置类，或者可以使用带有任何 hack 的顶栏来完成吗？
回答by hfogel
The question is old now.
现在这个问题很老了。
But if somebody looks here the trick in the current version is to use the nav-stack class, like so:
但是如果有人看这里，当前版本中的技巧是使用 nav-stack 类，如下所示：
<nav>
<ul class="nav nav-pills nav-stacked span2">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
回答by Tim Wu
The "nav nav-list" class of Twiter Bootstrap 2.0 is handy for building a side bar.
Twiter Bootstrap 2.0 的“nav nav-list”类对于构建侧边栏非常方便。
You can see a lot of documentation at http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php
你可以在http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php看到很多文档
回答by Evan P.
With Bootstrap 2.0 you can give your tabs the "stackable" class, which makes them stack vertically.
使用 Bootstrap 2.0，您可以为选项卡提供“可堆叠”类，使它们垂直堆叠。
回答by cecilphillip
With a few CSS overrides, I find the accordion / collapse plugin works well as a sidebar vertical menu. Here's a small sample of some overrides I use for a menu on a white background. The accordion is placed within a section container:
通过一些 CSS 覆盖，我发现手风琴/折叠插件可以很好地用作侧边栏垂直菜单。这是我用于白色背景菜单的一些覆盖的小示例。手风琴被放置在一个部分容器中：
.accordion-group
{
margin-bottom: 1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border-bottom: 1px solid #E5E5E5;
border-top: none;
border-left: none;
border-right: none;
}
.accordion-heading:hover
{
background-color: #FFFAD9;
}
回答by Vee
here is vertical menu base on Bootstrap http://www.okvee.net/articles/okvee-bootstrap-sidebar-menuit is also support responsive design.
这是基于 Bootstrap 的垂直菜单 http://www.okvee.net/articles/okvee-bootstrap-sidebar-menu它也支持响应式设计。
回答by Teemu Leisti
This doesn't quite yet look like what I want, but I accomplished something like
this by stacking nav pills in the leftmost two spans. This is what my app's
app/views/layouts/application.html.erbfile looks like:
这看起来还不是我想要的，但我通过在最左边的两个跨度中堆叠导航药丸来完成这样的事情。这是我的应用程序
app/views/layouts/application.html.erb文件的样子：
<!DOCTYPE html>
...
<body>
<!-- top navigation bar -->
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container-fluid">
<!-- the navigation buttons bar on the left -->
<div class="sidebar-nav span2"> <!-- we reserve 2 spans out of 12 for this -->
<ul class="nav nav-pills nav-stacked">
<li class="<%= current_page?(root_path) ? 'active' : 'inactive' %>">
<%= link_to "Home", root_path %>
</li>
<li class="<%= current_page?(section_a_path) ? 'active' : 'inactive' %>">
<%= link_to "Section A", section_a_path %>
</li>
<li class="<%= current_page?(section_b_path) ? 'active' : 'inactive' %>">
<%= link_to "Section B", section_b_path %>
</li>
</ul>
</div>
<div class="container-fluid span10"> <!-- use the remaining 10 spans -->
<%= flash_messages %>
<%= yield :layout %> <!-- the content page sees a full 12 spans -->
</div>
</div> <!-- class="container-fluid" -->
...
</body>
</html>
Now the stacked pills appear on the top left, below the navbar. When the user clicks on
one of them, the corresponding page loads. From the point of view of
application.html.erb, that page has the 10 rightmost spans available for it,
but from the page's view, it has the full 12 spans available.
现在堆叠的药丸出现在导航栏下方的左上角。当用户点击其中之一时，相应的页面就会加载。从 的角度来看
application.html.erb，该页面有 10 个最右边的跨度可用，但从页面的角度来看，它有完整的 12 个可用跨度。
The button corresponding to the page currently being displayed is rendered as
active, and the others as inactive. Specify the colours for active and inactive
buttons in file app/assets/stylesheets/custom.css.scss(in this case, the
colour for a disabled state is also defined):
当前显示的页面对应的按钮呈现为活动状态，而其他按钮呈现为非活动状态。指定文件中活动和非活动按钮的颜色app/assets/stylesheets/custom.css.scss（在这种情况下，还定义了禁用状态的颜色）：
@import "bootstrap";
...
$spray: #81c9e2;
$grey_light: #dddddd;
...
.nav-pills {
.inactive > a, .inactive > a:hover {
background-color: $spray;
}
.disabled > a, .disabled > a:hover {
background-color: $grey_light;
}
}
The active pill's colour is not defined, so it appears as the default blue.
活动药丸的颜色未定义，因此显示为默认蓝色。
File custom.css.scssis included because of the line *= require_tree .in
file app/assets/stylesheets/application.css.
custom.css.scss由于*= require_tree .file中的行而包含File app/assets/stylesheets/application.css。
回答by Farhan Ahmad
You can use Bootstrap's tabs with bootstrap-verticaltabs. This modifies Bootstrap's Tabs to provide an alternative vertical styling. That way you can use the built in tabs in bootstrap and get the vertical menu you are looking for.
您可以将 Bootstrap 的选项卡与bootstrap-verticaltabs. 这会修改 Bootstrap 的选项卡以提供替代的垂直样式。这样您就可以使用引导程序中的内置选项卡并获得您正在寻找的垂直菜单。
Bootstrap Vertical Tabs
Bootstrap 垂直选项卡
回答by Gary
Responsive utility classes
响应式实用程序类
Easiest way I can think of is to have a vertical left menu AND the collapsing Top Nav in your design and attach/use bootstraps responsive css.
我能想到的最简单的方法是在你的设计中有一个垂直的左侧菜单和折叠的顶部导航，并附加/使用引导响应 css。
Then just add classes of hidden phone, tablet etc (to suit) to your left nav and hidden desktop etc to the top nav
然后只需将隐藏的手机、平板电脑等（以适应）类添加到您的左侧导航中，将隐藏的桌面等添加到顶部导航中
see: http://twitter.github.com/bootstrap/scaffolding.html#responsive
见：http: //twitter.github.com/bootstrap/scaffolding.html#responsive
play around with that and hopefully it should be able to do what you want
玩这个，希望它应该能够做你想做的
回答by Mikko Tapionlinna
No, not in the current one. But you can take a look at the next version by downloading it from github. It has vertical pills and tabs. Maybe that will help? (be aware, it's under construction tho)
不，不是在当前的。但是你可以通过从github下载它来看看下一个版本。它有垂直药丸和标签。也许这会有所帮助？（请注意，它正在建设中）
回答by Craig Curtis
You can use the sidebar class to render list items vertically. Not exactly a menu, but close:
您可以使用侧边栏类垂直呈现列表项。不完全是菜单，但关闭：
