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/