Question

我在使用Bootstrap（3.2.0）的.NET应用程序中有以下代码片段并且工作得很好，但是当逐步逐步缩放浏览器时，搜索框弹出到第二行，当我倾向于缩小它直到移动视图开始播放时。

有没有人有这方面的经验？有人提出了一些很好的解决方案吗？

<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

Answer 1

将以下类添加到您的搜索框容器中：

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

Bootstrap会自动调整输入到其容器宽度的大小。使用'col-md(sm, lg)-*(1-12)'可以更好地控制调整大小。

Bootstrap搜索框问题

1 个答案: