Bootstrap Formular-Inline

Question

Ich versuche, ein Bootstrap-Formular-Inline-Layout in meinem Popup-Fenster zu implementieren. Mein Code ist wie diese ein:

<form class="form-inline" role="form"> 
    <div class="form-group"> 
    <label for="email">Email address:</label> 
    <input type="email" class="form-control" id="email"> 
    </div> 
    <div class="form-group"> 
    <label for="pwd">Password:</label> 
    <input type="password" class="form-control" id="pwd"> 
    </div> 
</form> 

die wie folgt aussieht:

Als ich horizontal Die Felder in eine vertikale Form schalten die Größe meiner Popup, die erwartet wird. Was ich wirklich will, ist, dass diese Textfelder zuerst kleiner werden und dann in einer bestimmten Breite, wenn sie erreicht wurden, in eine Spalte fallen. Ist das überhaupt möglich?

Dank

Answer 1

Ich würde diese Art von Verhalten, obwohl seine möglichen nicht empfehlen. Es wird einige Probleme auf kleinen Bildschirmgeräten (UX) verursachen, wobei ein Benutzer nur einen Teil seiner E-Mail sehen wird und er/sie sich nicht sicher ist, ob er/sie es richtig eingegeben hat.

[Bearbeiten] bitte unter dem Code finden:

@media screen and (min-width: 480px) { 
    .form-inline .form-control { 
    display: inline-block; 
    width: auto; 
    vertical-align: middle; 
    } 
    .form-inline .form-group { 
    display: inline-block; 
    } 
} 

JSFiddle: https://jsfiddle.net/umarmw/h1ezqa01/

[Bearbeiten] Feldskala langsam nach unten:

https://jsfiddle.net/umarmw/h1ezqa01/1/