css - 一行引导控件

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>

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

请帮我找到解决方案。

注意事项:

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

谢谢。

Answer 1

将您的按钮标记更改为此

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

plunk