-2

Twitter ブートストラップを使用する場合、次のような GUI があります。

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

ビューポートが小さすぎる場合はプログレスバーを新しい行に折り返す必要があり、新しい行に移動したら、次のようにビューポートの全幅に拡大します。

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

これには、どのような CSS マジックを使用する必要がありますか?

4

1 に答える 1

2

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 */
    }

}

したがって、画面サイズ、メディアの種類 (画面、印刷物など)、画面の種類 (Retina ディスプレイなど) に基づいて、CSS でレイアウトを制御できます。

于 2013-07-01T17:38:04.517 に答える