css - 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-horizo​​ntal 也是一种可能性，但仍然不适合我。我最终得到:

这是我的 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- 克里斯蒂娜

<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 主题下提供的。

我不一定说这就是答案，但我决定使用 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;