崩溃后的Bootstrap导航栏搜索

Question

我正在尝试在左侧创建一个带有我的品牌的导航栏，在中间创建一个全宽度搜索栏，在右侧创建一些其他页面。 当在较小的屏幕上查看页面时，我希望搜索栏位于折叠菜单外的同一位置，全宽。

我在搜索栏全宽而不将右侧页面推到另一行时遇到问题，当页面采用移动格式时，我也无法将搜索栏放在同一行。< / p>

这是小屏幕尺寸的样子：

这是我正在使用的导航栏的代码，CSS只是默认的bootstrap 3。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row">
            <span>
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">logo</a>
                </div>

                <form class="navbar-form">
                        <div class="form-group" style="display:inline;">
                            <div class="input-group" style="display:table;">
                                <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" type="text">
                                <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span>
                            </div>
                        </div>
                </form>

            </span>
            <span>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="about.html">About</a></li>
                        <li id="userPage">
                            <a href="#@userpage"><i class="icon-user"></i> My Page</a>
                        </li>
                        <li><a href="#logout" data-prevent="">Logout</a></li>
                    </ul>
                    </ul>
                </div>
            </span>
        </div>
    </div>
</nav>

Here is a jsfiddle with my code so far on it.

任何帮助将不胜感激！

Answer 1

这对你有用 -

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-default" role="navigation">
	<div class="row">
		<div class="col-sm-9 col-md-9">
			<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" href="#">Company Name</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Another action</a></li>
							<li><a href="#">Something else here</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated link</a></li>
							<li class="divider"></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div class="col-sm-3 col-md-3 pull-right">
		<form class="navbar-form" role="search">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Search" name="q">
				<div class="input-group-btn">
				<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
				</div>
			</div>
		</form>
		</div>
	</div>
</nav>