全屏宽度Bootstrap下拉菜单

时间:2013-06-27 16:47:08

标签: search twitter-bootstrap menu navbar

我正在尝试使引导下拉菜单全屏宽度和流畅,但似乎我不能这样做:)我试图将搜索字段放入下拉菜单(搜索字段和搜索按钮必须是在子菜单领域的中心)。

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;
 }

0 个答案:

没有答案