2

私は 4 列の設計をしており、Bootstrap を使用しています。デザインはモバイル デバイスでは 1 列で問題なくレンダリングされますが、「(最小幅: 768px) と (最大幅: 979px)」では、2 つしかスペースがないのに 4 つの列が表示されます。明らかに、行/スパンの設定は、これらのサイズに合わせて再考する必要があります。

私が想像できる唯一の方法は、セマンティック CSS クラスを HTML で使用し、CSS には LESS を使用してグリッド クラスのみを含め、画面サイズに応じて異なるグリッド クラスを含めて 4 列または 2 列のレイアウトを実現することです。ただし、これが機能するかどうかはわかりません。

これは進むべき道ですか、それとも私はこれを複雑に考えすぎていますか?

ありがとう！

編集:これは機能しません。.row に直接適用されるルールのみをインポートし、.row が関与するより複雑なルールはインポートしません。私がうまくいくと思った理由は、誰かが他のグリッドで SASS を使ってこれを行うのを見たからです。考え？

.header{
     .row;
}

また: https://groups.google.com/forum/#!topic/twitter-bootstrap/R5jEp0oQ_-E

4

1 に答える 1

1

これがあなたの考えかどうかはわかりませんが、ページのその部分をスタイルして、このようなものを使用することはできますか?

@gridColumnWidth: 60px; // example width declared in bootstrap

@media only screen and (min-width: 768px) and (max-width: 979px) {
   .yourClass {
        max-width: @gridColumnWidth * 2
    }
}
于 2012-10-05T23:21:41.537 に答える