如何通过Bootstrap垂直分隔线绘制线？ [英] How to draw lines through Bootstrap vertical dividers?

问题描述

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

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

在这里我现在 - http://jsfiddle.net/KckU3/8/

我不能得到如何做呢？

I'm using Twitter Bootstrap I need to draw menu line this: https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png .

So I need draw lines through vertical dividers.

Here what I have now - http://jsfiddle.net/KckU3/8/

I can't get how to make it ?

推荐答案

$ c> .dropdown-toggle class。

First you had a typo in the .dropdown-toggle class.

然后，你不是在寻找一个垂直分隔线，

Then, you are not looking for a vertical divider, which would look like a border, but for a border, and you just need to hide some of it.

这是你的线索：

.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

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

The other important thing is the position to left or right :

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

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

I fixed a few other things for better effects, but you have the main idea.

更新jsfiddle

这篇关于如何通过Bootstrap垂直分隔线绘制线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！