Question

我有四个div，ABCD，我在小屏幕上叠加在一起。但是，在中/大屏幕中，我想要一个3列布局，其中第四个div直接位于div A之下，而不是创建一个新行。这是我在xs和sm中得到的，这是完美的：

但这是我在md-lg中得到的：

这就是我想要的md-lg： enter image description here

这是我的代码，我是根据从另一篇文章中借用的代码构建的：

<div class="container">
        <div class="col-md-4" style="background-color: lightblue">
            Content of A<br />line2 A<br />line3 A
        </div>
        <div class="col-md-4" style="background-color: lightcoral">
            Content of B<br />line2 B<br />line3 B<br />line4 B<br />line5 B
        </div>
        <div class="col-md-4" style="background-color: yellowgreen">
            Content of C - this has a variable number of lines<br />line2 C<br />line3 C<br />line4 C<br />line5 C<br />line6 C<br />line7 C<br />line8 C<br />line9 C
        </div>
        <div class="col-md-4" style="background-color: lightgreen">
            Content of D<br />line2 d<br />line3 d
        </div>          
    </div>

到目前为止对答案的评论：

菲尔的小提琴很接近，但在小屏幕上将D节作为第二部分。
我不希望有两个单独的容器（一个可见小和xs，一个可用于md和lg）因为实际内容有相当数量的控件和代码。
user1667253的解决方案已接近，但d部分的实际内容仍然低于c的内容，如下所示：

Answer 1

经过多次修改并确认两种布局都在预期的布局模式下工作后，我找到了一个可行的解决方案。

首先，您的布局应该包含以下HTML：

<div id="movable_rows">
<div class="row">
    <div id="lt_col" class="col-md-4">
        <div class="row">
            <div id="col_a" class="col-md-12">Col A<br>1<br>2</div>
        </div>

    </div>
    <div id="mid_col" class="col-md-4">Col B<br>1<br>2<br>3<br>4</div>
    <div id="rt_col" class="col-md-4">Col C - This has a variable number of lines<br>1<br>2<br>3<br>4<br>5<br>6<br>7</div>
</div>
<div id="flt_row" class="row">
    <div id="col_d" class="col-md-12">Col D<br>1<br>2</div>
</div>
</div>

然后，您需要在文档头中添加以下脚本：

<script type="text/javascript">
$(document).ready(function(){
    RearrangeRows();
});
$( window ).resize(RearrangeRows);
function RearrangeRows()
{
    var col_float = $('#lt_col').css('float');
    if(col_float === 'left')
    {
        $('#flt_row').appendTo($('#lt_col'));
    } else {
        $('#flt_row').appendTo($('#movable_rows'));
    }

}
</script>

正如您所看到的，当页面加载脚本时，我会调用一个自定义函数来检查左列（包含示例中的“列A”内容）是否向左浮动。如果它向左浮动，那么你正在处理标准布局;即桌面模式或其他。否则，如果它没有向左浮动，则Bootstrap将其置于移动模式。根据它检测到的布局模式，它将目标DIV元素附加到两个中的任何一个是适当的父元素。当窗口调整大小时，调用该函数以确保重新排列将事物保存在正确的位置。

这是working example in JSFiddle

在Firefox 17和Chrome 30中测试。

Answer 2

组合浮点和位置是最终div出现在下方的原因。如果清除最后一个div的这两个值，则应该给出预期的结果。

http://jsfiddle.net/S8xsB/1/

<div class="container">
    <div class="col-md-4" style="background-color: lightblue">
        Content of A<br />line2 A<br />line3 A
    </div>
    <div class="col-md-4" style="background-color: lightcoral">
        Content of B<br />line2 B<br />line3 B<br />line4 B<br />line5 B
    </div>
    <div class="col-md-4" style="background-color: yellowgreen">
        Content of C - this has a variable number of lines<br />line2 C<br />line3 C<br />line4 C<br />line5 C<br />line6 C<br />line7 C<br />line8 C<br />line9 C
    </div>
    <div class="col-md-4 last" style="background-color: lightgreen">
        Content of D<br />line2 d<br />line3 d
    </div> 
</div>

的CSS

<style>
    .col-md-4.last{
        position:inherit;
        float:inherit;
    }
</style>

Bootstrap3 div位置和排序

2 个答案: