Bootstrap 控制在一行

Question

我需要在一条直线上使用带有字形的文本框，这是我所做的：

http://plnkr.co/edit/GZQeGTqDsvTh9XsXmMFy?p=preview

  <div class="w3-row" style="vertical-align:middle">
        <div class="w3-col s6">
            <input ng-readonly="true" type="text" ng-model="login" placeholder="Login" class="form-control" />
        </div>
        <div class="w3-col s4">
            <input class="form-control" ng-readonly="true" type="text" ng-model="password" placeholder="Password" />
        </div>
        <div class="w3-col s2">
            <button class="glyphicon glyphicon-refresh btn btn-default"></button>
        </div>
    </div>

看起来不错，但是字形按钮略低于文本输入的底线，我希望它的高度被拉伸到那些输入，或者至少，相对于它们的中心在中间，那就好看了

请帮我找到解决办法。

通知：

或者w3.css或者angular-ui的bootstrap都可以解决这个问题。
解决方案不应依赖于使用“内联表单”。
最好的解决方案是不使用“行”“列”类，因为它们不可能将线水平拉伸到 100% 并填充每一列而不使它看起来丑！

谢谢。

Answer 1

将您的按钮标记更改为此

<button class="btn btn-default">
     <span class="glyphicon glyphicon-refresh "></span>
</button>

plunk

Bootstrap 控制在一行

Bootstrap controls in one line

css

angular-ui-bootstrap