0

私は一種の「コーディネーター」インターフェースを備えたWebアプリケーションに取り組んでいます。私が取り組んでいるEyefinityセットアップ（3600x1920の3つのポートレートモニター、またはベゼル補正がオンの3780x1920）をサポートできるようにしたいと思います。

私はTwitterBootstrapを使用しており、レスポンシブデザイン機能には必要なものがあると思いますが、どのようにカスタマイズすればよいかわかりません。

基本的に3つの列が必要で、それぞれの幅は約1200ピクセルですが、画面の幅がたとえば1920ピクセルの幅よりも小さい場合は、これらの列を3行に分割する必要があります。

responsive.lessこれは、ファイルのセットに別のクラスのデバイスを追加することで実行できますか？

現在使用しているコードは次のとおりです。

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

これがいくつかのテストスクリーンショットです：

幅が広すぎて標準画面に快適に収まりません

同じデータ、3600x1920で完璧

4

1 に答える 1

2

さて、それは私が思っていたよりも簡単でした。

私がしなければならなかったのは、トップレベルの行にクラスを追加し（私はそれをrow-eyefinityと呼びました）、次に次のCSSをスタイルシートに追加することでした。

@media (max-width:3500px) {
    .row-eyefinity > [class*="span"] {
        float: none;
        display: block;
        width: auto;
        margin-left: 0;
    }
}
于 2012-05-28T21:07:44.187 に答える