Question

我正在使用Twitter Bootstrap 我需要绘制菜单行： 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;
}

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

Updated 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/

如何通过Bootstrap垂直分隔线绘制线条？

5 个答案: