17

ブートストラップ内のいくつかの流体コンテナ/行の順序を再配置/交換する方法.....

次のページでブートストラップの流動的な例を例に取ると、次のようになります。

http://twitter.github.com/bootstrap/examples/fluid.html

左側に流動的な列のサイドバーがあり、次に同じ列にヒーローユニットがあります。そして、次の行のいくつかのコンテンツ。モバイルビュー/小さい画面に切り替えると、同じ順序で表示されます。しかし、どうすればその順序を変更できますか。つまり、ページの最後にサイドバーを表示し、ページの上部にヒーローユニットを表示する方法は？

4

6 に答える 6

29

Bootstrap v3 の新しいバージョンでは、列の順序付けがサポートされるようになりました。

列の順序

.col-push-* and .col-pull-*修飾子クラスを使用して、組み込みのグリッド列の順序を簡単に変更できます。

 <div class="row">
  <div class="col-md-9 col-md-push-3">9</div>
  <div class="col-md-3 col-md-pull-9">3</div>
</div>

次の順序を与えます。

 ----------------------------
|     3     |      9       |
----------------------------

ドキュメント: http://getbootstrap.com/css/#grid-column-ordering

于 2013-08-01T08:18:28.953 に答える
21

グリッドはデフォルトではこれをサポートしていないことに注意する必要がありますが、これに対処する方法はいくつかあります。

たとえば、両方のスパンを逆にして (モバイル ビューの順序を設定)、フローティングで通常の配置を強制することができます。

<div class="row-fluid">
    <div class="span9 pull-right">
        <!-- ... -->
    </div><!--/span-->
    <div class="span3 pull-left">
        <!-- ... -->
    </div><!--/span-->
</div><!--/row-->

次に、.span要素は小さな画面用に多かれ少なかれ正しく変更されますが、この動作を修正するためのいくつかのルールがまだあります。

.row-fluid .pull-left[class*="span"]:last-child { margin-left: 0; }

@media (max-width: 767px) {
    .row-fluid .pull-right[class*="span"] { float: none; }
}

2 つ以上の列を使用する場合は、.pull-right要素のマージンを逆にする必要があります (最後の列を除く)。次のようになります。

.row-fluid .pull-right[class*="span"] { margin-right: 2.5641%;margin-left: 0; }
.row-fluid .pull-right[class*="span"]:first-child { margin-right: 0; }

ライブ デモ (jsfiddle)とフルスクリーン(一部のスタイルは通常とレスポンシブの間で設定する必要があるため、スタイル パネルで jsfiddle を「ハック」します)

于 2012-10-15T22:26:27.773 に答える
1

サイドバーをヒーローの下に配置したいが、他のものの上に配置したい場合は、単にリストをすべての前/後に配置するのではなく、要素の間に配置するだけの問題であるため、いくつかの dom 操作が必要になります。このようなものが動作するはずです:

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#sidebar").insertAfter($("#hero"));
    } else {
        $("#sidebar").prepend($("#containingrow"));
    }
});
于 2012-10-15T22:22:46.377 に答える
0

Bootstrap グリッドに要素を並べ替えて追加するためのプラグインに取り組んでいます。現時点では非常にラフで壊れやすいですが、基本的な機能にのみ使用される場合は、本番環境に耐えられると思います.

プラグインでは、グリッドが一貫しており、すべて特定の幅のスパンである必要がありますが、これで役立つ場合があります。

マークアップがレンダリングされる前にこの種の作業をすべて行うのが最善ですが、使用を余儀なくされているいくつかのテンプレート言語の制限のために事前にソートできない場合には、Bootstrap を使用します。

Github
コードペン

于 2013-06-29T19:05:32.497 に答える
-1

CSS3 によって提供される新しい可能性であるメディア クエリを使用してそれを行うことができます。

メディア クエリを使用すると、たとえば、特定の種類の画面にのみ適用されるスタイルを作成できます。あなたが話していることをしたい場合は、次のようにすることができます：

@media only screen and (max-device-width: 480px) {
      .sidebar { width: 100%; bottom: 0%; blahblah: something;  }
}

そのスタイルは、画面の幅が 480px 未満の場合にのみ適用されます。このソリューションは、実際にはブートストラップではなく、CSS3 に依存しています。

ちなみに、bootstrap.responsive.css (ブートストラップ フレームワークでも提供されます) を含めると、レイアウトは自動的に 1 列のレイアウトになりますが、希望する順序ではない可能性があります。

于 2012-10-15T19:39:33.370 に答える