Bootstrap CSS - 如何使搜索表单与其他navbar元素保持一致？

Question

CSS的新手，我试图让我的搜索表单与其他导航栏元素保持一致，奇怪的是当我最初在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;
}

Answer 1

我认为您可以为 navbar-right 创建规则。只需添加这些css;

.navbar-right{
    float: right;
    margin-top: 10px;
}