2

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

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

这是我在 md-lg 中想要的：在此处输入图像描述

这是我的代码，它是基于从另一篇文章中借来的代码构建的：

<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>

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

  1. 菲尔的小提琴很接近，但将 D 部分作为小屏幕上的第二部分。
  2. 我不想有两个单独的容器（一个对 small 和 xs 可见，一个对 md 和 lg 可见），因为实际内容背后有相当多的控件和代码。
  3. user1667253的解决方案很接近，但是d段的实际内容还是低于c的内容，如下：

4

2 回答 2

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 元素附加到两者中适当的父元素中的任何一个。当/如果调整窗口大小时，将调用该函数以确保重新排列将事物保持在正确的位置。

这是JSFiddle 中的一个工作示例

在 Firefox 17 和 Chrome 30 中测试。

于 2013-10-04T22:41:55.683 回答
0

浮动和位置的组合使最终的 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>
于 2013-10-04T02:27:45.787 回答