CSS 如何通过 Bootstrap 垂直分隔线绘制线条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11389946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw lines through Bootstrap vertical dividers?
提问by skrypalyk
I'm using Twitter Bootstrap I need to draw menu line this: https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png.
我正在使用 Twitter Bootstrap 我需要绘制菜单行： 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/
这是我现在拥有的 - http://jsfiddle.net/KckU3/8/
I can't get how to make it ?
我不明白怎么做？
采纳答案by Sherbrow
First you had a typo in the .dropdown-toggleclass.
首先你在.dropdown-toggle课堂上有错别字。
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.
然后，您不是在寻找看起来像边框的垂直分隔线，而是在寻找边框，您只需要隐藏其中的一些即可。
Here is your clue :
这是你的线索：
.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;
}
The padding-bottomis actually just one more pixel than defined by default.
该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.
我修复了一些其他的东西以获得更好的效果，但你有主要的想法。
回答by Henry Okwuenu
simply use
简单地使用
<hr class="divider">
that should give you what you want
那应该给你你想要的
回答by Hans Stevens
Now there is:
现在有：
<li class="divider"></li>
回答by hockeyman
If I understood you correctly
如果我理解正确
<li><hr></li>
Should be useful
应该有用
回答by Hymanwanders
Your post is somewhat confusing, but from the image you posted, it appears you want to create a tabbed menu with a dropdown? If so, Bootstrap already lets you do that.
您的帖子有些令人困惑，但从您发布的图片来看，您似乎想创建一个带有下拉菜单的选项卡式菜单？如果是这样，Bootstrap 已经让你这样做了。
Tab Menus: http://twitter.github.com/bootstrap/components.html#navsDropdowns: http://twitter.github.com/bootstrap/javascript.html#dropdowns
标签菜单：http: //twitter.github.com/bootstrap/components.html#navs下拉菜单：http: //twitter.github.com/bootstrap/javascript.html#dropdowns
Here's a demo that puts it together: http://jsfiddle.net/LWTqS/
这是一个将它放在一起的演示：http: //jsfiddle.net/LWTqS/
