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-*处理＆＃34;额外的小＆＃34;设备（小于768px）。此外，

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

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

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

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

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

1 个答案: