3

zurb Foundation 3に固定列グリッドを実装するにはどうすればよいですか？現在、財団のグリッドは流動的であり、パーセンテージに基づいています。ブートストラップ（非流体）グリッドに似たものを実装したいのですが、グリッドの表示方法には4つの可能性しかありません（少なくとも、流動性のあるモバイルに落ちるまで）

ファウンデーショングリッドの機能（およびセマンティクス）を維持したいので、単純にブートストラップグリッドと交換したくありません。

これは純粋な「レスポンシブ」グリッドの理論に反することを私は知っていますが、現実世界のクライアントとその要求に対処することで、予測可能なグリッド動作の有限セット（適応グリッド？）を持つことに傾倒しました。

4

2 に答える 2

4

CSSの列と行の幅をoverride@media宣言の固定位置にリセットする必要があります。例えばあなたが持っているところ

.row { width: 100%;}
.one, .row .one { width: 8.33333%; }    
.two, .row .two { width: 16.66667%; }    
.three, .row .three { width: 25%; }

あなたは今必要になるでしょう、

@media screen and min-width(960px){
    .row { width: 960px;}
    .one, .row .one { width: 80px /* 960 x 8.33333% */ }    
    .two, .row .two { width: 160px; /* 960 x 8.33333% */}    
    .three, .row .three { width: 240px; /* 960 x 8.33333% */}
}

以下は、更新された質問の前の以前の回答です。

ページの周りにラッパーdivを追加します

<div class="wrapper">
<!-- Page content and styles go here -->
</div>

次に、CSSに含める必要があります

.wrapper {
    width: 98%; 
    max-width: 1200px;
}
于 2012-09-17T14:20:19.207 に答える
1

行のスケーリングを防ぐには、次のように入力する必要がありますapp.css。

.row { max-width: none; }

これにより、767pxを超えるすべてのビューポートの行幅が固定されます（767pxはデフォルトのモバイルグリッドブレークポイントです）。

グリッドをいくつかの固定ステップで調整する必要がある場合は、メディアクエリを使用してみてください。

@media screen and (min-width: 768px) and (max-width: 940px) {
  .row { width: 840px; }
}

@media screen and (min-width: 941px) and (max-width: 1050px) {
  .row { width: 960px; }
}
于 2012-12-02T09:33:21.837 に答える