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/