我正在尝试使引导下拉菜单全屏宽度和流畅,但似乎我不能这样做:)我试图将搜索字段放入下拉菜单(搜索字段和搜索按钮必须是在子菜单领域的中心)。
HTML:
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Search</b></a>
<ul class="dropdown-menu" id="menu1">
<div class="search_field">
<form class="navbar-form pull-right">
<input type="text" class="span4" placeholder="Search">
<button type="submit" class="btn btn-search">Search</button>
</form>
</div>
</ul>
</li>
</ul>
CSS:
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 0px !important;
border-radius: 0px !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
float: left;
list-style: none outside none;
margin: 0px;
min-width: 100%;
padding: 10px 100%;
margin: 0, -100%;
position: absolute;
top: 100%;
z-index: 1000;
}
}
.btn-search {
background-color: orange !important;
background-image: linear-gradient(to bottom, orange, #orange light) !important;
background-repeat: repeat-x !important;
padding: 10px 20px !important;
}