Bootstrap - 内联表单按钮未与其他输入垂直对齐

Question

我似乎无法让这个friggen按钮与表单控件对齐。我尝试过使用以下策略但没有成功：

<div class="input-group">
 <input type="text" class="form-control">
  <span class="input-group-btn">
   <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>  


<div class="input-append">
 <input name="search" id="search"/>
  <button class="btn">button</button>
</div>  

我已经看到班级form-horizontal也是可能的，但仍然不适合我。我最终得到：

这是我的HTML

<form action="/Account/logoff" class="form-inline" method="post" role="form" novalidate="novalidate">                <div class="form-group">
                <label class="sr-only" for="Username">Username</label>
                <input class="form-control form-text" data-val="true" data-val-required="The Username field is required." id="Username" name="Username" placeholder="Username" type="text" value="">
            </div>
            <div class="form-group">
                <label class="sr-only" for="Password">Password</label>
                <input class="form- control form-text" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" placeholder="Password" type="password">
            </div>
            <button class="btn btn-primary btn-sm">Login</button>
</form>  

更新
似乎我的控件以某种方式渗透了表单元素

更新2 - 对于Christina

<header role="banner" class="navbar navbar-inverse">
<div class="navbar-header">
    <button id="menu-toggler" data-toggle="collapse" type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand"> <img alt="logo" src="images/logo.png"> </a>
</div>

<!--User is logged on, output user controls-->
    <div class="nav navbar-nav pull-right">
<form action="/Account/logoff" class="form-inline" method="post" role="form" novalidate="novalidate">                <div class="form-group">
                <label class="sr-only" for="Username">Username</label>
                <input class="form-control form-text" data-val="true" data-val-required="The Username field is required." id="Username" name="Username" placeholder="Username" type="text" value="">
            </div>
            <div class="form-group">
                <label class="sr-only" for="Password">Password</label>
                <input class="form- control form-text" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" placeholder="Password" type="password">
            </div>
            <button class="btn btn-primary btn-sm">Login</button>
</form>        </div>


</header>

Answer 1

在这种情况下，所吸取的教训是：不要信任css是正确的，因为它是在专业的引导主题下提供的。

我不能说这是答案，但我决定使用bootstrap提供的jumbotron示例重新开始我自己的导航栏。

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 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" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
        <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
                <input type="text" placeholder="Email" class="form-control input-sm form-text">
            </div>
            <div class="form-group">
                <input type="password" placeholder="Password" class="form-control input-sm form-text">
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
        </form>
    </div><!--/.navbar-collapse -->
</div>

我的一点点css

.navbar-inverse input.form-text{
 background-color:#0f1217;
 border: 1px solid #0f1217;
 border-radius: 4px;
 color: #fff;
 transition: all 0.3s linear 0s;

}