bootstrap form-inline

Question

我想在我的彈出窗口上實現一個bootstrap form-inline佈局。我的代碼只是像這樣的：

<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> 

，看起來像這樣：

當我調整我的彈出式水平中的字段切換到預計垂直形式。我真正想要的是讓這些文本框首先變小，然後在達到某個寬度時，如果已經達到了某個列，這甚至有可能嗎？

感謝

Answer 1

我不會推薦這種行爲，雖然其可能的。這會在小屏幕設備（UX）上引起一些問題，用戶只會看到他的部分電子郵件，並且他/她不確定他/她是否已正確輸入。

[編輯]請找到下面的代碼：

@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/

[編輯]字段縮小緩緩道：

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