Вопросы, связанные с поиском в Bootstrap

У меня есть следующий фрагмент кода в приложении .NET, который использует Bootstrap (3.2.0), и он работает достаточно хорошо, хотя при постепенном масштабировании браузера шаг за шагом окно поиска появляется на второй ряд, когда я предпочел бы, чтобы он уменьшался до тех пор, пока не появится мобильный вид.Вопросы, связанные с поиском в 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

добавить следующий класс в SearchBox контейнере:

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

Bootstrap автоматически размер вход по ширине это контейнер. Используйте 'col-md(sm, lg)-*(1-12)', чтобы обеспечить более контролируемое изменение размера.

источник

2015-02-02 19:35:02 Knostradamus

Вопросы, связанные с поиском в Bootstrap

ответ

Смежные вопросы