6

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

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

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

我不知道怎么做？

4

5 回答 5

22

只需使用

<hr class="divider">

那应该给你你想要的

于 2014-04-03T10:52:52.170 回答
4

现在有：

<li class="divider"></li>
于 2013-09-11T19:42:02.470 回答
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

于 2012-07-09T17:45:17.917 回答
1

如果我理解正确

<li><hr></li>

应该有用

于 2012-07-09T06:31:59.077 回答
0

您的帖子有些混乱，但从您发布的图片来看，您似乎想创建一个带有下拉菜单的选项卡式菜单？如果是这样，Bootstrap 已经让你这样做了。

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

这是一个将它们组合在一起的演示：http: //jsfiddle.net/LWTqS/

于 2012-07-09T15:31:25.470 回答