Bootstrap - 为什么这个Navbars内容会移动?

时间:2015-03-13 19:52:20

标签: html css twitter-bootstrap

问题背景:

我的导航栏包含以下内容:

enter image description here

当我通过将屏幕缩小为移动格式并重新打开它来折叠此导航栏时,搜索框和按钮将垂直向下移动,如下所示:

enter image description here

代码:

我无法弄清楚为什么会这样,这是HTML标记。任何帮助将不胜感激。

   <div class="navbar-fixed-top">
    <nav class="navbar navbar-default" role="navigation" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 logo">HS<b>WH</b></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <ul class="nav navbar-nav">
                            <li><a href="@Url.Action("AllCatagories", "Catagory", new { id = 0})" class="scroll-link" data-id="myCarousel">Products</a></li>
                            <li><a href="@Url.Action("ViewCartContents", "Cart")" class="scroll-link" data-id="Welcome">Cart</a></li>
                            <li><a href="@Url.Action("ContactUs", "Contact")" class="scroll-link" data-id="features">Contact</a></li>
                        </ul>
                    </div>

                    <div class="input-group navbar-form navbar-right ">
                        <input type="text" class="form-control searchInput" name="searchTerm" placeholder="Search this site..." id="searchInput">
                        <button type="submit" value="click" class="btn btn-default searchBtn form-inline"><span class="glyphicon glyphicon-search"></span></button>
                    </div>

                    <div class="navbar-form navbar-right hidden-sm hidden-xs">
                        @Html.Action("MiniCart", "Cart")
                    </div>
                </form>
            </div>
        </div>
    </nav>
</div>

0 个答案:

没有答案