如何通过Bootstrap垂直分隔线划线

Question

我正在使用Twitter引导程序我需要绘制菜单行如下：https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png。

所以我需要通过垂直的分隔线来画线。

这是我现在拥有的——http://jsfiddle.net/KckU3/8/

我不知道怎么做？

Answer 1

只需使用

<hr class="divider">

这应该会给你想要的

Answer 2

现在有：

<li class="divider"></li>

Answer 3

首先您在.dropdown-toggle类中有一个拼写错误。

然后，你不是在寻找一个看起来像边界的垂直分隔符，而是一个边界，你只需要隐藏其中的一些。

这是你的线索：

.navbar .nav > li > a.dropdown-toggle {
    position: relative;
    bottom: -1px;
    z-index: 1005;
    background: white;
    padding-bottom: 12px;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
    /* ... */
    border-top: 1px solid #000;
}

padding-bottom实际上只比默认情况下定义的多了一个像素。

另一件重要的事情是向左或向右的位置：

ul.nav li.dropdown:hover ul.dropdown-menu {  
    /* ... */
    left: 0px;
}

为了更好的效果，我修正了一些其他的东西，但你有主要的想法。

更新的jsfiddle

Answer 4

如果我正确理解你，

<li><hr></li>

应该是有用的

Answer 5

你的帖子有点令人困惑，但从你发布的图片来看，你似乎想创建一个带下拉菜单的选项卡菜单？如果是这样的话，Bootstrap已经允许你这么做了。

选项卡菜单：http://twitter.github.com/bootstrap/components.html#navs下拉列表：http://twitter.github.com/bootstrap/javascript.html#dropdowns

下面是一个演示：http://jsfiddle.net/LWTqS/