bootstrap弹力流动元素

Question

使用Twitter引导程序时，我有一个这样的GUI：

| [label] [input] [input] [button] [progressbar.............................] |

如果视口太小，我希望进度条换行到新行，一旦它在新行上，我希望它伸展到视口的整个宽度，如下所示：

| [label] [input] [input] [button]            |
| [progressbar..............................] |

我应该采用什么样的CSS魔法呢？

Answer 1

您可以尝试使用Media Queries：

一个例子：

@media (min-width:400px) and (max-width:600px){ /*any screen which have size between 400px and 600px for e.g. */

    .progressbar {
        clear:both; /*clear floats*/
        display:block; /* block contains 100% of parent */
    }

}

因此，您可以根据屏幕尺寸，媒体类型（屏幕，打印等），屏幕类型（视网膜显示等）使用CSS控制布局。