Question

我在具有嵌套流体网格的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

Answer 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%;
}  

}

Answer 2

这不能解决您的问题，但我认为嵌套网格的正确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。

祝你好运！

Answer 3

内部和外部跨度的宽度可以变化的变体，并且可以有多个嵌套列。使用.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 -->

外部流体网格堆叠，但内部应保持完整

3 个答案: