Question

<div id="data">
    <div class="qa">
        <div class="question">
            Question 1
        </div>
        <div class="answer">
            Answer 1
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 2
        </div>
        <div class="answer">
            Answer 2
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 3
        </div>
        <div class="answer">
            Answer 3
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 4
        </div>
        <div class="answer">
            Answer 4
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 5
        </div>
        <div class="answer">
            Answer 5
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 6
        </div>
        <div class="answer">
            Answer 6
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 7
        </div>
        <div class="answer">
            Answer 7
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 8
        </div>
        <div class="answer">
            Answer 8
        </div>
    </div>
    <div class="qa">
        <div class="question">
            Question 9
        </div>
        <div class="answer">
            Answer 9
        </div>
    </div>
</div>

上面是一些基本的HTML，它显示了在某个窗口宽度之上我希望在三列中的内容。但是，当用户调整窗口大小时，我需要将列转到2列。因此，在表格的第一个变体中，它将是：

对于较小的屏幕，网格应重新排序为如下所示。

请注意，我需要数据是列而不是行。我一直在尝试使用从bootstrap到自定义javascript的所有内容，但我仍然无法使用它。这些数据最初是用C＃构建的，我需要这个在客户端工作并且是跨浏览器友好的。下面是我一直试图开始工作的一些代码，它有点工作，但我被卡住了。有没有更好的办法？我确信有。

http://jsfiddle.net/MKL4g/624/

if (typeof jQuery === 'undefined') {
    throw new Error('Resizable Columns requires jQuery.');
}

+ function($) {
    var version = $.fn.jquery.split(' ')[0].split('.');
    if ((version[0] < 2 && version[1] < 9) ||
        (version[0] === 1 && version[1] === 9 && version[2] < 1) || (version[0] > 3)) {
        throw new Error('Resizable Columns requires jQuery version 1.9.1 or higher, but lower than version 4.');
    }
}(jQuery);

function ResizeColumns(data, width, numCols) {
    this.data = data;
    this.width = width;
    this.noCols = numCols;
    this.resize = function() {
        if (width < 768) {
            this.noCols = 2;
        }
        if (data === undefined || data === null) {
            throw new Error('data is empty!');
        }
        if (this.data === undefined || this.data === null) {
            throw new Error('this.data is empty!');
        }
        logMessages('before max');
        var max = Math.ceil(this.data.length / this.noCols);
        var colArray = [];
        var msgs = '';
        msgs += 'data.length = ' + this.data.length;
        msgs += '<br />max = ' + max;
        msgs += '<br />width = ' + this.width;
        msgs += '<br />noCols = ' + this.noCols;
        logMessages(msgs, false);
        colArray = chunkArrayInGroups(data, max);
        msgs += '<br />colArray.length = ' + colArray.length;
        for (var i = 0; i < colArray.length; i++) {
            if (i === 0) {
                $('#data').after('<div class="section" id="section' + i + '"></div>')
            } else {
                var tmp = i - 1;
                $('#section' + tmp).after('<div class="section" id="section' + i + '"></div>')
            }
            var colData = colArray[i];
            for (var j = 0; j < colData.length; j++) {
                $('#section' + i).append(colData[j])
            }
        }

    };

    function chunkArrayInGroups(array, unit) {
        var results = [],
            length = Math.ceil(array.length / unit);

        for (var i = 0; i < length; i++) {
            results.push(array.slice(i * unit, (i + 1) * unit));
        }
        return results;
    };
};

function logMessages(msg, useConsole) {
    if (useConsole) {
        window.console && console.log(msg);
    } else {
        $('#msgs').html(msg);
    }
}

//$(document).ready(function() {
//  GetData();
//  var data = $("body").data("data");
//  var rc = new ResizeColumns(data, $(window).width(), 3);
//  rc.resize();
//});

function GetData() {
    var data = $("body").data("data");
    if (data === null || data === undefined) {
        data = $('#data').find('.qa');
        if (data !== null && data !== undefined) {
            $("body").data("data", data);
        } else {
            logMessages('No data loaded', true);
        }
    } else {
        logMessages('Data loaded via jquery.data()', true);
    }
}

var $window = $(window);
var width = $window.width();
$(window).on({
    load: function() {
        logMessages('load method');

    },
    resize: function() {
        setInterval(function() {
            if (width != $window.width()) {
                width = $window.width();
                GetData();
                var data = $("body").data("data");
                var rc = new ResizeColumns(data, width, 3);
                rc.resize();
            }
        }, 300);
    }
});

Answer 1

使用bootstrap根据屏幕大小操作布局。

你要做的就是添加班级名称。供参考检查this

Answer 2

你可以尝试将其显示为flex。这是一个很好的简单教程，如何做到这一点。我学会了如何从中制作柔性显示器：https://www.youtube.com/watch?v=G7EIAgfkhmg

您可以根据需要为第n个孩子设定顺序。

Answer 3

一个超级简单的方法是创建两个单独的div，用你的问题和答案如何需要它们，然后使用bootstrap大小来显示/隐藏不同分辨率的整个问题集。这样可以让您更好地控制布局，因为您将不再依赖于各个部分在屏幕尺寸上的流动方式。

阿卡什的回答可以起作用，但这听起来像是一个相当大的麻烦，只有当需求变化，问题被添加和删除等等时才会变得更加轻松......

Answer 4

That's what you need。在devices > medium中，您将列分成更多部分。

但当然这只是一个静态的例子，只是为了理解引导网格如何工作以及它如何在你的情况下帮助你。

在窗口调整大小时重新排序DIV中的项目

4 个答案: