Bootstrap - 行内表单按钮与其他输入框垂直不对齐

Question

我似乎无法让这个该死的按钮与表单控件对齐。我已经尝试过以下策略，但都没有成功：

<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>

- Adrian

---

不，我正在使用Bootstrap 3。也许这就是为什么它对我没有起作用的原因。 - Adrian

你的导航栏类名写错了。使用navbar-right而不是pull-right，同时提供完整的导航栏HTML代码。 - Christina

为什么不使用这个导航栏来开始你的工作 http://getbootstrap.com/examples/jumbotron/ - Christina

我实际上是在使用一个模板。我正在尝试修改其中的导航栏。我没有想到问题会出现在导航栏中，但现在你提到了这一点，这确实有道理。 - Adrian

制作模板的人并不一定精通Bootstrap，我在任何地方都看到了一些严重的问题。所有与表单有关的类在导航栏中效果不佳，你必须使用它们提供的类或创建一个新组件，同时你不应该使用pull-right而是使用navbar-right和navbar-left。 - Christina

Answer 1

在这种情况下，我们得到的教训是：不要因为一个专业的Bootstrap主题提供了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;

}

- Adrian