Question

我正在尝试布局响应式div。基本上我正试图实现这个观点。

适用于大型桌面：

 __ _______ __ 
|  |  2.1  |  |
|1 |_______|3 |
|  |2.2|2.3|  |
|__|___|___|__|

平板电脑

：

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   | 2.2  | 2.3   |
   |______|_______|
   |______3_______|

最后适用于手机等小型设备：

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   |     2.2      |
   |______________|
   |     2.3      |
   |______________|
   |______3_______|

和相应的带引导程序的html如下：

    <div class="row"> 
        <div class="col-lg-2 col-md-12 col-sm-12">
        </div>
        <div class="clearfix visible-md visible-sm"></div>
        <div class="col-lg-8 col-md-12 col-sm-12">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12"></div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                </div>
                <div class="clearfix visible-sm"></div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                </div>
                <div class="clearfix visible-sm"></div>
            </div>
        </div>
        <div class="clearfix visible-md visible-sm"></div>
        <div class="col-lg-2 col-md-12 col-sm-12">
        </div>
        <div class="clearfix visible-md visible-sm"></div>
    </div>

对于台式机和平板电脑，它按预期工作。但是在小案例中打破了布局。它显示了类似的东西

    ______________
   |______1_______|
   |     2.1      |
   |______________|
   |     2.2      |
   |______________|
   |______3_______|      
   |_____2.3______|

看起来第3列位于2.3之上。我还在尝试学习bootstrap / css，所以任何建议都会受到赞赏

Answer 1

我很确定你的手机不够大，无法成为小型设备网格布局的目标，因为它仅适用于超过768像素宽的媒体。您要找的班级是col-xs。在这里，您可以详细解释引导网格系统：http://getbootstrap.com/css/#grid

Answer 2

我不明白为什么要添加所有不必要的标记。 Bootstrap负责处理每个视口的所有浮动和清除。

这就是我编写代码以获得所需布局的方法：

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
    <h1>1</h1>
</div>
<!--end col-->
<div class="col-sm-8">
    <div class="row">
        <div class="col-sm-12">
            <h1>2.1</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
    <div class="row">
        <div class="col-sm-6">
            <h1>2.2</h1>
        </div>
        <!--end col-->
        <div class="col-sm-6">
            <h1>2.3</h1>
        </div>
        <!--end col-->
    </div>
    <!--end row-->
</div>
<!--end col8-->
    <div class="col-sm-2">
        <h1>3</h1>
    </div>
    <!--end col-->
</div>
<!--end row-->
</div>
<!--end container-fluid-->

VIEW DEMO HERE

bootstrap div alignment在小型设备上破坏了

2 个答案: