css - 自举拉伸流动元素

Question

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

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

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

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

我应该为此求助什么样的 CSS 魔法？

Answer 1

您可以尝试使用媒体查询：

一个例子：

@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 控制布局。