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

如果这对您的设计可行，这是一种可能性：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

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