Bootstrap搜索框問題

我在使用Bootstrap（3.2.0）的.NET應用程序中有以下一段代碼，它工作得很好，但是當逐步縮小瀏覽器時，搜索框會彈出第二排，當我寧願它縮小，直到移動視圖開始。Bootstrap搜索框問題

有沒有人有這方面的經驗？任何人都想出了一些很好的解決方案來克服它？

<nav class="navbar navbar-default" role="navigation">      
<div class="container"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <!-- <a class="navbar-brand" href="#">Connect</a> --> 
</div> 

<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
     <li id="ctl00_ctl09_homeli"> 
      <a href="/MRMConnectLatestApp/memberHomePage.aspx"> 
       <!-- <img id="ctl00_ctl09__imgHomeLink" title="Home" src="App_Themes/Default/Images/HomeIcon.png" alt="Home" style="height:28px;border-width:0px;Vertical-align:middle" /> --> 
       <span id="ctl00_ctl09_Literal1">Home</span> 
      </a>   
     </li> 
     <li id="ctl00_ctl09_MakeBookingli"><a href="/MRMConnectLatestApp/mrmselectsite.aspx?disableSiteSelection=1"> 
      Make a Booking</a></li> 
     <li id="ctl00_ctl09_ManageBookingsli"><a href="/MRMConnectLatestApp/mrmViewMyBookings.aspx?showOption=1"> 
      Manage Bookings</a></li> 
     <li id="ctl00_ctl09_ManageSubscriptionsli"><a href="/MRMConnectLatestApp/MemberSubscriptions.aspx"> 
      Memberships</a></li> 
     <li id="ctl00_ctl09_UnpaidSaleli"><a href="/MRMConnectLatestApp/ManageSales.aspx"> 
      Unpaid Sales</a></li> 

    </ul> 
    <ul class="nav navbar-nav navbar-right hidden-md hidden-sm hidden-lg"> 
     <li><a href="MemberManagement/EditMemberDetails.aspx">My Details</a></li> 
     <li><a href="help.aspx">Help</a></li> 
    </ul> 
    <div class="navbar-form navbar-right" role="search"> 
     <div class="input-group"> 
      <!-- <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> --> 
      <input name="ctl00$ctl09$SearchTextBox" type="text" id="ctl00_ctl09_SearchTextBox" class="SearchBox form-control"> 
      <div class="input-group-btn"> 
       <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>    
       <button class="btn btn-success" type="button">Advanced</button> 
      </div> 
     </div> 
    </div>  
</div>

http://www.bootply.com/sqwnkcDkjx

來源

2014-10-30 Nick Lewis

下面的類添加到您的搜索框容器：

<div class="input-group col-md-12">

引導會自動大小的輸入，寬度它的容器。使用'col-md(sm, lg)-*(1-12)'以允許更多受控調整大小。

來源

2015-02-02 19:35:02 Knostradamus

Bootstrap搜索框問題

回答

相關問題