2016-04-16 13 views
0

私は本当に私が叫ぶことができるのでとても混乱しています。私は自分のブートストラップから脱出しようとしており、自分のブレークポイントを使うことを学びます。私は、このページで探しています:私は多くのことを好き反応的な行を作成する

http://zurb.com/studios

。私はコードを理解しようとしています。各行の下では、fx呼び出しクラスは大規模な12列を呼び出します。定義されているのはどこですか?私はちょうどそのウェブサイトのようなグリッドを作る方法を学びたいと思う。多分誰かがチュートリアルをどこかに知っていますか?

+0

レスポンスグリッドを使用できますが、このページでは列数を選択するとすべてのコードが表示されます。http://www.responsivegridsystem.com/calculator/ – mlegg

答えて

0

あなたがブートストラップCSSを見れば、このシンプルで非常に効果的なグリッドシステムを作るために使用したコードを見ることができます。このページは幅が広いため、 - ここにコードがあります。

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
    float: left; 
    } 

^これをすべて左に保つために使用します。 あなたがもっと興味を持っているのは以下の通りです。

グリッドシステムには興味がありませんが、他のものが表示されます。

.col-md-pull-12 { 
    right: 100%; 
    } 
    .col-md-pull-11 { 
    right: 91.66666667%; 
    } 
    .col-md-pull-10 { 
    right: 83.33333333%; 
    } 
    .col-md-pull-9 { 
    right: 75%; 
    } 
    .col-md-pull-8 { 
    right: 66.66666667%; 
    } 
    .col-md-pull-7 { 
    right: 58.33333333%; 
    } 
    .col-md-pull-6 { 
    right: 50%; 
    } 
    .col-md-pull-5 { 
    right: 41.66666667%; 
    } 
    .col-md-pull-4 { 
    right: 33.33333333%; 
    } 
    .col-md-pull-3 { 
    right: 25%; 
    } 
    .col-md-pull-2 { 
    right: 16.66666667%; 
    } 
    .col-md-pull-1 { 
    right: 8.33333333%; 
    } 
    .col-md-pull-0 { 
    right: auto; 
    } 
    .col-md-push-12 { 
    left: 100%; 
    } 
    .col-md-push-11 { 
    left: 91.66666667%; 
    } 
    .col-md-push-10 { 
    left: 83.33333333%; 
    } 
    .col-md-push-9 { 
    left: 75%; 
    } 
    .col-md-push-8 { 
    left: 66.66666667%; 
    } 
    .col-md-push-7 { 
    left: 58.33333333%; 
    } 
    .col-md-push-6 { 
    left: 50%; 
    } 
    .col-md-push-5 { 
    left: 41.66666667%; 
    } 
    .col-md-push-4 { 
    left: 33.33333333%; 
    } 
    .col-md-push-3 { 
    left: 25%; 
    } 
    .col-md-push-2 { 
    left: 16.66666667%; 
    } 
    .col-md-push-1 { 
    left: 8.33333333%; 
    } 
    .col-md-push-0 { 
    left: auto; 
    } 
    .col-md-offset-12 { 
    margin-left: 100%; 
    } 
    .col-md-offset-11 { 
    margin-left: 91.66666667%; 
    } 
    .col-md-offset-10 { 
    margin-left: 83.33333333%; 
    } 
    .col-md-offset-9 { 
    margin-left: 75%; 
    } 
    .col-md-offset-8 { 
    margin-left: 66.66666667%; 
    } 
    .col-md-offset-7 { 
    margin-left: 58.33333333%; 
    } 
    .col-md-offset-6 { 
    margin-left: 50%; 
    } 
    .col-md-offset-5 { 
    margin-left: 41.66666667%; 
    } 
    .col-md-offset-4 { 
    margin-left: 33.33333333%; 
    } 
    .col-md-offset-3 { 
    margin-left: 25%; 
    } 
    .col-md-offset-2 { 
    margin-left: 16.66666667%; 
    } 
    .col-md-offset-1 { 
    margin-left: 8.33333333%; 
    } 
    .col-md-offset-0 { 
    margin-left: 0; 
    } 
関連する問題