Bootstrap Kontrollen in einer Zeile

Question

ich brauche, hier Textfeld mit einem glyphicon in einer geraden Linie zu verwenden, was ich getan habe:

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> 

Es sieht gut, aber die Glyphe-Taste ist etwas unter der unteren Zeile der Texteingaben, ich möchte, dass ihre Höhe zu diesen Eingängen gedehnt wird oder zumindest in der Mitte relativ zu ihrer Mitte liegt, dann wird es gut aussehen.

Bitte helfen Sie mir, die Lösung zu finden.

Hinweis:

1. Entweder w3.css oder Winkel-ui des Bootstrap kann verwendet werden, um dieses Problem zu lösen.
2. Die Lösung sollte nicht von der Verwendung der "Form-Inline" abhängen.
3. Die beste Lösung wäre diejenige, die überhaupt keine "Zeilen" - "Col" -Klassen verwendet, weil sie es unmöglich machen, Zeilen horizontal auf 100% zu strecken und jede Spalte zu füllen, ohne sie hässlich zu machen!

Vielen Dank.

Answer 1

Ihre Schaltfläche Markup dies Ihr Hauptproblem ist, weil die glyphicon in einer Spanne innerhalb der Schaltfläche sollte

ändern

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

plunk