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

Question

我正在使用Twitter Bootstrap我需要绘制菜单行:https: //www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png.

所以我需要通过垂直分隔线绘制线条.

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

我不知道如何制作它？

Answer 1

简单地用

<hr class="divider">

应该给你你想要的东西

Answer 2

首先，你在课堂上犯了一个错字.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