Question

enter image description here

我正在尝试创建一个带有5个可排序响应网格的仪表板。四个网格具有相同的宽度，一个网格的宽度是其他网格的两倍。网格必须具有响应性和移动友好性。他们必须堆叠在一起以获得分辨率＆lt; = 768.我尝试使用许多库。对于一些人，我有遏制问题，以及一些填充/装订问题和响应问题。

以下代码是我最新的试用版。当我们沿着y轴排序并且当引入网格之间的沟槽时断开时，它具有间歇性的遏制问题。我是新的基础，排序。请检查以下代码，让我知道如何解决上述两个问题。

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css" />
    <style type="text/css">
        .list {
            background-color: pink;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            font-family: Geneva, Arial, Helvetica, sans-serif;
            border: 1px solid gray;
        }

        .listDbl {
            border: 1px solid #000;
            background-color: pink;
            font-size: 30px;
            text-align: center;
            cursor: pointer;
            font-family: Geneva, Arial, Helvetica, sans-serif;
            border: 1px solid gray;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

<body>
    <div id="sortable">
        <div class="row display">
            <div class="ui-state-default large-4 columns list">1</div>
            <div class="ui-state-default large-4 columns list">2</div>
            <div class="ui-state-default large-4 columns list">3</div>
            <div class="ui-state-default large-8 columns listDbl">4</div>
            <div class="ui-state-default large-4 columns list">5</div>
        </div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
        <script src="http://cdn.jsdelivr.net/foundation/3.2.2/javascripts/foundation.min.js"></script>
        <script>
            $(document).foundation();
            $(function() {
                $(".row").sortable();
                $(".row").disableSelection();
            });
        </script>
</body>
</html>

小提琴：http://jsfiddle.net/mBSA4/66/

Answer 1

好的，这里的作品是一个小提琴。

http://jsfiddle.net/uq8puqy2/

你使用的是基础3.2

   http://cdn.jsdelivr.net/foundation/3.2.2/stylesheets/foundation.min.css

使用5个或更好的版本，因为列标记已更改

仪表板在基础中有5个可排序的响应式网格

1 个答案: