如何顯示導航欄菜單項和搜索按鈕窗體內嵌塊

Question

我想顯示導航欄菜單項和內嵌塊中的搜索按鈕窗體，因爲它顯示爲兩行。

這裏是我的代碼

HTML

    <div class="col-md-4 col-md-offset-3"> 
     <form action="" class="search-form"> 
      <div class="form-group has-feedback"> 
       <label for="search" class="sr-only">Search</label> 
       <input type="text" class="form-control" name="search" id="search" placeholder="search"> 
       <span class="glyphicon glyphicon-search form-control-feedback"></span> 
      </div> 
     </form> 
    </div> 

       <div class="col-sm-6 col-xs-8"> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">My Account</a></li> 
        <li><a href="#">Sign In</a></li> 
        <li><a href="#">Create Account</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</a></li> 
       </ul> 

        </div> 
       </div> 

     </div><!--/.container--> 
    </div><!--/.top-bar--> 

CSS

#header .search{ 
    display: inline-block; 
} 

.navbar>.container .navbar-brand{ 
margin-left: 0; 
} 

.top-bar { 
padding: 10px 0; 
background: #191919; 
    border-bottom: 1px solid #222; 
line-height: 28px; 
} 

.search-form .form-group { 
float: right !important; 
transition: all 0.35s, border-radius 0s; 
width: 32px; 
height: 32px; 
background-color: #fff; 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; 
    border-radius: 25px; 
    border: 1px solid #ccc; 
} 

    .search-form .form-group input.form-control { 
    padding-right: 20px; 
    border: 0 none; 
    background: transparent; 
    box-shadow: none; 
    display:block; 
    } 

    .search-form .form-group input.form-control::-webkit-input-placeholder { 
    display: none; 
    } 

    .search-form .form-group input.form-control:-moz-placeholder { 
/* Firefox 18- */ 
display: none; 
    } 
.search-form .form-group input.form-control::-moz-placeholder { 
/* Firefox 19+ */ 
display: none; 
} 
.search-form .form-group input.form-control:-ms-input-placeholder { 
display: none; 
} 
.search-form .form-group:hover, 
.search-form .form-group.hover { 
width: 100%; 
    border-radius: 4px 25px 25px 4px; 
} 
    .search-form .form-group span.form-control-feedback { 
    position: absolute; 
    top: -1px; 
    right: -2px; 
    z-index: 2; 
    display: block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
    color: #3596e0; 
    left: initial; 
    font-size: 14px; 
    } 

這裏是jsfiddle

Answer 1

將搜索欄放在菜單旁邊意味着在搜索表單展開時覆蓋它。所以，我可能會打破了一個小的設計，尤其是改變.col-sm-6寬度：

.col-sm-6{ 
    width:100% !important; 
} 
.nav.navbar-nav > li{ 
    display:inline-block; 
    float:none; 
    vertical-align: top; 

    transition: all 0.2s ease; 
} 

#search-form{ 
    display:inline-block 
} 

.search-form .form-group input{ 
    transition: width 0.25s ease 0.1s; 
    display:none; 
} 

.search-form .form-group{ 
    overflow:hidden; 
} 
.search-form .form-group:hover{ 
    overflow:visible; 
} 
.search-form .form-group:hover input{ 
    display:inline; 
    position: absolute; 
    width: 50vw; 
    right: 0; 
    background: white; 
    border-radius: 25px; 
} 

http://jsfiddle.net/pLvp7ru0/3/

我認爲你應該更好的行爲添加到您的搜索欄，你必須留在其上方保持顯示。見MDN。