我正在使用bootstrap 3构建一个站点,遇到了以下问题:
我的网站设计有一个右对齐的导航,应该包括一个搜索栏后的最后一个链接。http://imgur.com/eevc0iS
我似乎只能使这个工作,如果我保持导航左对齐后的标志。我不能得到导航和搜索栏是在一个很好的右对齐线。
我想让它看起来和我现在拥有的差不多,但是在另一边有搜索栏。
下面是代码:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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" rel="home" href="#">BRAND</a>
</div><!-- / .navbar-header-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">link</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">about</a></li>
</ul>
<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="srch-term" id="srch-term">
<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-collapse -->
</div><!-- /. container-->
</div> <!-- /. navbar-->
4条答案
按热度按时间dohp0rv51#
您不需要使用div进行换行就可以向右浮动。
简单地使用已有的类名,线索就在标记
.navbar-left
和.navbar-right
中。使用这些来使元素在导航栏中左右浮动并避免“除法”。你将需要交换链接和搜索周围,因为我们是浮动的。
JsFiddle
还有
.pull-left
和.pull-right
,您可以在页面上的其他地方使用它们来满足类似的浮点要求。bfhwhh0e2#
我关闭了搜索表单div.works perfect之后的ul标记。
azpvetkf3#
我用Bootstrap官方网站上的最新样本做了测试,我认为它可以通过一些css规则来完成。 Package 你想要右对齐的元素,并设置 Package 器的位置和右。见样本。
JSFIDDLE
thtygnil4#