css - 用它的网格系统控制 Bootstrap 下拉菜单

Question

我正在为一个元素使用 Bootstrap 框架，但下拉菜单有一个小问题。这是链接；

http://erkano.com/neu

当您将鼠标悬停在“YÖNETİM”按钮上时，您会看到下拉菜单出现。但是，我希望此下拉菜单具有与整个菜单栏相同的宽度值，即 col-md-5。我无法处理它的原因是下拉菜单应该保留在第一个按钮中，即 col-md-5 中的 col-md-2。

你有什么想法吗？提前致谢

Answer 1

好的，现在我明白了这个问题。

您可以通过...使下拉菜单成为全宽...为该下拉菜单提供类容器。

<ul class="dropdown-menu main-menu-dropdown container" id="menu1">

我通过检查很快做到了这一点，它使它几乎全宽..这在实践中有点像作品。您想到了让下拉菜单设置宽度并使用 javascript 使其响应...

但我也这样做了，而且效果还不错。你的布局很奇怪，无论如何都会响应中断，但在这里我改变了类:

.dropdown:hover .dropdown-menu {
display: block;
width: 95%; <-- I added this
}

和

dropdown-menu {
position: fixed; <-- changed to fixed instead of absolute
top: 13%; <-- changed to 13% instead of 100%
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
font-size: 14px;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
}

您可以修改 css 以获得您想要的确切大小，但简而言之，这是可行的。