1

流体グリッドがネストされているBootstrapレイアウトのモバイル画面で問題が発生しました。外側の流体グリッドにその列を狭い画面にスタックさせたいのですが、内側のグリッドはそのままにしておく必要があります。デモはここにあります（更新：ネストされたコンテナ流体を削除しましたが、まだ問題は解決していません）：http: //jsfiddle.net/uLDQM/10/

私が欲しいもの：

Desktop:
1 2  3 4

Mobile
1 2
3 4

しかし、私は持っています：

Desktop:
1 2  3 4

Mobile
1
2
3
4
4

3 に答える 3

2

これが設計で実行可能である場合、1つの可能性があります：http：//jsfiddle.net/panchroma/uLDQM/9/

メディアクエリを使用して、小さな画面のデフォルトの動作を上書きしています。

@media (max-width: 767px){
.span6 .row-fluid .span6 {
width: 48.93617021276595%;
float:left;
}  

.span6 .row-fluid [class*="span"]:first-child {
margin-right: 2%;
}  

}
于 2012-12-30T23:28:40.663 に答える
1

内側スパンと外側スパンの両方の幅が変化し、複数のネストされた列が存在する可能性があるバリエーション。モバイルディスプレイの同じ行に必要な列の各ペアを .inner div でラップします

http://jsfiddle.net/panchroma/n2RNx/

デスクトップディスプレイ
1 2 1a 2a 1b 2b 1c 2c

モバイルディスプレイ
1 2
1a 2a
1b 2b
1c 2c

<div class="container-fluid">
<div class="row-fluid">
    <div class="span8 outer">

            <div class="row-fluid">

                <div class="inner"> 
                   <div class="span2">1</div>
                <div class="span2">2</div>
               </div><!-- end inner -->

                 <div class="inner"> 
                   <div class="span1">1a</div>
                <div class="span1">2a</div>
               </div><!-- end inner -->

                <div class="inner"> 
                   <div class="span1">1b</div>
                <div class="span1">2b</div>
               </div><!-- end inner -->

                <div class="inner"> 
                   <div class="span2">1c</div>
                <div class="span2">2c</div>
               </div><!-- end inner -->


            </div> <!-- end nested fluid-row -->


    </div><!-- end outer -->

    <div class="span4 outer">

            <div class="row-fluid">
                <div class="inner"> 
                   <div class="span6">3</div>
                <div class="span6">4</div>
               </div><!-- end inner -->
            </div><!-- end nested row -->

    </div><!-- end outer -->
  </div><!-- end parent row -->



</div><!-- end container -->​
于 2012-12-31T13:01:02.017 に答える
1

これはあなたの質問を解決しませんが、ネストされたグリッドの正しい HTML は次のとおりだと思います:
http://jsfiddle.net/panchroma/uLDQM/4/

以下のように、ネストされた 2 つのコンテナー流体 div をコメントアウトしたことに注意してください。

<div class="container-fluid">
<div class="row-fluid">
    <div class="span6 outer">
        <!-- <div class="container-fluid"> -->
            <div class="row-fluid">
                <div class="span6 inner">
                    1
                </div>
                <div class="span6 inner">
                    2
                </div>
            </div>
      <!--  </div> -->
    </div>
    <div class="span6 outer">
        <!-- <div class="container-fluid"> -->
            <div class="row-fluid">
                <div class="span6 inner">
                    3
                </div>
                <div class="span6 inner">
                    4
                </div>
            </div>
       <!--  </div> -->
    </div>
</div>
</div>​

詳細については、 http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystemを参照してください。

幸運を！

于 2012-12-30T21:44:36.877 に答える