Question

我使用Bootstrap框架来创建我的布局我想要实现的是这样的（对不起，我不能在这里插入图像）： Layout

到目前为止，我只能设法正确创建浏览器或移动设备。我无法正确地将布局从浏览器更改为移动设备。

目前，我正在使用此代码：

<div id="main-content" class="container">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
    </div>
</div>

此代码存在的问题是Orange容器位置与Green容器平行（导致Blue和Orange之间存在相当大的差距），而我希望Orange容器直接位于Blue容器下方。

我找到了一个解决方案，即复制容器并使用visible- *根据媒体大小显示或隐藏，但我不认为这是一个非常干净的解决方案。如果可能的话，我想使用仅限CSS的解决方案，而不是使用js。

我真的很感激这个问题的任何帮助非常感谢你！

编辑：
我在此链接中重新创建了布局：http://www.bootply.com/C97SCp3Wcn

Answer 1

看这里

<div class="row">

     <div class="col-lg-8 col-xs-12">

         <div class="row">

             <div class="col-sm-12 col-lg-12">
                 red
             </div>

             <div class="col-sm-12 col-lg-12">
                 blue
             </div>
         </div>

     </div>


     <div class="col-lg-4 col-xs-12">

         <div class="row">

             <div class="col-sm-12 col-lg-12">
                 green
             </div>

             <div class="col-sm-12 col-lg-12">
                 orange
             </div>
         </div>

     </div>

</div>

这很有效。

说明：

您必须为桌面屏幕创建两个列lg-8和lg4，为移动屏幕创建xs-12。在此列中，您可以创建彩色行。这种嵌套结构（连续两行）是必要的，因为外部列不具有相同的高度。

<强>更新：

我有两种选择。没有Javascript和bootstrap，但最小的还原剂。见这里：http://www.bootply.com/b4PCoVthvm

或者您可以将javascript（masonry）与bootstrap结合使用。见http://masonry.desandro.com/

Answer 2

试试这个答案......希望它适用于你

这个适用于桌面版

<div id="main-content" class="container visible-desktop">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
    </div>
</div>

和移动版

<div id="main-content" class="container visible-phone">
    <div class="row no-padding">
        <div class="col-xs-12 col-sm-8 red">Red container</div>     
        <div class="col-xs-12 col-sm-4 blue">Blue container</div>
        <div class="col-xs-12 col-sm-4 orange">Orange container</div>
        <div class="col-xs-12 col-sm-8 green">Green container</div>     

    </div>
</div>

Answer 3

你必须编写自己的自定义css来实现这一点。在boostrap媒体查询中输入你自己的代码来实现你的布局。示例： -

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        //your css code
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        //your css code

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        //your css code


    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        //your css code

    }

Bootstrap交换div响应

3 个答案: