Bootstrap 表单页面在小尺寸屏幕上无法正确显示

Question

我正在编辑一个引导倒计时页面，目前我被这个表单卡住了。 虽然在大屏幕上看起来不错，但一旦我将它缩小到 800 像素以下，它就开始看起来更像这样了...... 有关修复它的任何建议？

代码如下：

<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <h1>WeBuild</h1>
                <h2 class="subtitle">We're working hard to improve our website and we'll ready to launch after</h2>
                <div id="countdown"></div>
                <form class="form-inline signup" role="form">
                  <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address">
                  </div>
                  <button type="submit" class="btn btn-theme">Get notified!</button>
                </form>     

            </div>                  

Answer 1

根据Bootstrap docs，col-xs-* 处理“超小”设备（小于 768 像素）。还有，

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如如果.col-lg-* 类不存在，将任何.col-md-* 类应用于元素不仅会影响其在中型设备上的样式，还会影响大型设备上的样式。

换句话说，您不需要div 上的所有三个网格类。如果您希望它在所有设备上都成为 -col-12，请尝试：

<div class="col-xs-12">

编辑 - 修复了 Preben 发布的小提琴：http://jsfiddle.net/jxmoe88g/1/