如何通过 Bootstrap 垂直分隔线画线？

Posted 2023-03-06

【中文标题】如何通过 Bootstrap 垂直分隔线画线？

【英文标题】：How to draw lines through Bootstrap vertical dividers?

【发布时间】：2012-07-08 13:12:12

【问题描述】：

我正在使用 Twitter Bootstrap 我需要这样画菜单线： https://www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png 。

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

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

我不知道怎么做？

【问题讨论】：

保管箱链接无效

【参考方案1】：

简单地使用

<hr class="divider">

这应该给你你想要的

【参考方案2】：

现在有：

<li class="divider"></li>

【讨论】：

"now" 在时间上可能看起来很奇怪 - 也许你可以限定它（例如，这适用于 html 5 及更高版本吗？）

这是最短最好的答案！

【参考方案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

【讨论】：

@DenMed 我不明白，你必须更具体。也许它与这个问题无关。

@Sherbow，我的意思是只为下拉切换绘制边框顶部。

@DenMed 我还是看不出你想要什么。如果我的回答与您的问题相符，请接受。如果没有，您应该在原始问题帖子中提供更多信息：图片、您希望实现的目标、遇到的问题。

【参考方案4】：

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

标签菜单：http://twitter.github.com/bootstrap/components.html#navs 下拉列表：http://twitter.github.com/bootstrap/javascript.html#dropdowns

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

【讨论】：

谢谢，但这张图片并不完全正确，它只是说明我需要做什么。

thanks. 还有一个问题：如何仅在下拉切换上绘制边框？

您将不得不添加一些自定义 CSS 来覆盖 Bootstrap 的选项卡和下拉菜单的默认样式。我建议使用 Chrome 的开发者工具来检查哪些规则被应用到你想要改变的元素上，这样你就可以知道从哪里开始

【参考方案5】：

如果我理解正确的话

<li><hr></li>

应该有用

【讨论】：

对不起，我理解错了。我会为菜单项制作图像。我认为这是最简单的方法

这不是编程解决方案，我画得不好。

它不是编程解决方案，而是它的解决方案。轻松解决。使用与否取决于您。我只是建议

所以你建议画三张图：1. 不悬停链接 2. 悬停第一个链接 3. 悬停第二个链接是吗？

其实是的。 1.不悬停，2.悬停不下拉（如果需要），3.悬停下拉