我有以下代码(full source of page):
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand" href="#">Test</span>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{% active request "^/$" %}"><a href="#">Home</a></li>
<li class="{% active request "^/about$" %}"><a href="#">About</a></li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search...">
</form>
<div class="navbar-form pull-right">
<a href="{% url "login" %}" class="btn">Log in</a>
<a href="#" class="btn btn-primary">Sign up</a>
</div>
</div>
</div>
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
当作为桌面加载时,我得到以下信息:
请注意,“登录”和“注册”按钮位于搜索栏之前。
但是,当我调整浏览器的大小,并且导航栏响应时,我得到了:
现在,在搜索栏之后是“登录”和“注册”按钮。这是因为它们是右拉元素。
我试过将按钮和搜索栏包装在
float: right
父div中。这使它们保持正确的顺序,但导致它们怪异地掉到一边。这是不希望的。有没有人有解决方案使他们的订单不被撤销? 最佳答案
问题是一旦navbar-form
逻辑生效,navbar-search
和nav-collapse
上的浮点数将设置为无。不依赖浮点数,而是使用display: inline-block
。以下似乎合理地工作(您应该创建自己的类,而不是内联应用样式):
<div class="pull-right">
<!-- .btn's already have display: inline-block so don't need to apply it manually -->
<!-- margin-left: 15px is applied so that the buttons align with the
search field -->
<a style="margin-left: 15px;" href="#" class="btn">Log in</a>
<a href="#" class="btn btn-primary">Sign up</a>
<form class="navbar-form" style="display:inline-block">
<input type="text" class="search-query" placeholder="Search...">
</form>
</div>