0

私はブートストラップを使用して個人のWebサイトを作成していましたが、この特定のレイアウトを作成したかったのです。

各部分は幅940ピクセル、12列なので、3つの部分のうち1つを画面表示すると、他の2つは非表示になります。これを実行するにはどうすればよいですか？

たくさんのご協力に感謝します！

4

1 に答える 1

3

このマークアップを使用して、デフォルトの12列のブートストラップグリッドを指定します。

<div class="container supercontainer">
    <div class="supercontainer-inner clearfix view-1">
        <div class="container"><div class="row"><div class="span12"><p>Grid 1</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 2</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 3</p></div></div></div>
    </div>
</div>

そしてこのCSS：

.supercontainer {
    overflow-x: hidden;
}
.supercontainer-inner {
    width: 2820px;
  -webkit-transition: margin-left 0.35s ease;
     -moz-transition: margin-left 0.35s ease;
       -o-transition: margin-left 0.35s ease;
          transition: margin-left 0.35s ease;
}
.supercontainer-inner > .container {
    float: left!important;
}


.supercontainer-inner.view-1 { margin-left: 0; }
.supercontainer-inner.view-2 { margin-left: -940px; }
.supercontainer-inner.view-3 { margin-left: -1880px; }

カルーセルスタイルシートを使用すると、より良い効果が得られることに注意してください。

デモ（jsfiddle）を確認して、ビューを切り替えるための1つの可能なアプリケーションを参照してください。

そして、これはjsfiddleでのレスポンシブバージョンです。

ただし、これには、ビュー数の変数を使用して、LESSスクリプトにクリーンアップする必要があります（おそらく、基本グリッドを拡張するだけです。ハム）。

@media (min-width: 1200px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -1170px; }
    .supercontainer-inner.view-3 { margin-left: -2340px; }
    .supercontainer-inner {
        width: 3510px;
    }
}
@media (max-width: 979px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -724px; }
    .supercontainer-inner.view-3 { margin-left: -1448px; }
    .supercontainer-inner {
        width: 2172px;
    }
}
@media (max-width: 767px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -100%; }
    .supercontainer-inner.view-3 { margin-left: -200%; }
    .supercontainer-inner {
        width: 300%;
    }
    .supercontainer-inner >.container { width: 33.33%!important; }
}
于 2012-10-24T19:24:42.797 に答える