html - Bootstrap 导航栏搜索外折叠

Question

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

我在不将右侧的页面推到另一行的情况下获取全 Angular 搜索栏时遇到问题，而且当页面为移动格式时，我也无法在同一行获取搜索栏。

这是它在小屏幕尺寸下的样子:

这是我正在使用的导航栏的代码，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>