我试图让我的搜索表单与其他导航栏元素保持一致,奇怪的是当最初进入页面时它在 2 行上,但当我刷新它时它是内联的。我如何保持内联?
我试过添加以下内容:
.navbar-right{
float: right;
margin-top: 10px;
}
遗憾的是,这没有用,当第一次访问 URL 时,搜索表单仍然转到 2 行,刷新页面后,它按预期进入内联。请帮忙!!!
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item" href="{{ path('general_sym_project_homepage') }}">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="http://www.stackoverflow.com">Stack Overflow</a>
<a class="blog-nav-item" href="http://www.symfony.com">Resources</a>
<a class="blog-nav-item" href="{{ path('general_sym_project_about') }}">About</a>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</nav>
</div>
</div>
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
最佳答案
当 Bootstrap 创建导航栏时,它们将列表项包装在 <ul>
中。并向左浮动,使其正确排列。
因此,如果您将链接放入列表并使用 Bootstrap 的类,那么您将把所有内容都排好。
<nav class="blog-nav">
<ul class="nav navbar-nav">
<li><a class="blog-nav-item" href="{{ path('general_sym_project_homepage') }}">Home</a></li>
<li><a class="blog-nav-item" href="#">New features</a></li>
<li><a class="blog-nav-item" href="http://www.stackoverflow.com">Stack Overflow</a></li>
<li><a class="blog-nav-item" href="http://www.symfony.com">Resources</a></li>
<li><a class="blog-nav-item" href="{{ path('general_sym_project_about') }}">About</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</nav>
如果您不想在导航项上使用 Bootstraps 样式,请删除 nav and navbar
来自 <ul
的类(class)> 并将其添加到 CSS:
.blog-nav > ul {
list-style: none;
float: left;
}
.blog-nav > ul > li {
float: left;
}
关于css - Bootstrap 3 - 是什么导致搜索表单保持在线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22678601/