[英]Bootstrap3 Dropdown Menu Alignment
I am using bootstrap3 for my project and have added a large menu to my tool that I found on a snippets website. 我正在为我的项目使用bootstrap3,并在片段网站上找到的工具中添加了一个大菜单。
When I added the menu, I am trying to get it to align underneath the button but its off to the right. 当我添加菜单时,我正在尝试使其在按钮下方对齐,但在右侧关闭。
I tried this but it didn't change anything. 我试过了,但没有任何改变。
.dropdown-large{ left:inherit }
The example code can be found here if desired: http://bootsnipp.com/snippets/featured/large-dropdown-menu 如果需要,可以在此处找到示例代码: http : //bootsnipp.com/snippets/featured/large-dropdown-menu
Here is the CSS behind the menu it self: 这是菜单本身的CSS:
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
How could I go about moving that menu left more? 我该如何继续向左移动该菜单?
Update: Here is a fiddle of the issue. 更新:这是一个小问题。 Drag the window be be large;
将窗口拖大; you will see how it is a static position on the right side of the page.
您会在页面右侧看到它的静态位置。 http://jsfiddle.net/MV9tL/embedded/result/
http://jsfiddle.net/MV9tL/embedded/result/
The only thing I can think of that doesn't mess up other functions is the following: 我唯一想到的不会弄乱其他功能的是:
DEMO: http://jsbin.com/raxuli/1 演示: http : //jsbin.com/raxuli/1
Don't use !important, be more specific outside the media queries: 不要使用!important,在媒体查询之外更具体:
.dropdown.dropdown-large {
position: static;
}
Add to end of your css: 添加到您的CSS末尾:
@media (min-width: 1300px) {
.dropdown-menu-large {
min-width: 600px; /*needs a width or add width to the stuff inside it */
}
.navbar-nav .dropdown.dropdown-large {
position: relative
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.