0
うまくいけば、私は単純なものを見逃しているかもしれないが、アイテム間にあまりにも多くのスペースがある( "grid-stack-item" div)。私はアイテムが少し近くにあるグリッドが欲しいです。おそらく誰かが項目間のスペースを減らす方法を示したコードペインやフィドルを持っていたと思っていました。Gridstack:アイテム間のスペースを変更する
関連するコード:
<html>
\t <head>
\t \t <!--JQUERY-->
\t \t <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
\t \t <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
\t \t <!--Bootstrap-->
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
\t \t <!--Lodash-->
\t \t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
\t \t <!--Gridstack-->
\t \t <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
\t \t
\t \t <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
\t \t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
\t \t <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
\t \t
\t \t <style>
\t \t \t .grid-stack-item{background-color: #00CED1;}
\t \t \t .red {border: 1px solid red;}
\t \t \t .blue {border: 3px solid blue;}
\t \t \t .red-dash {border: 3px dashed red;}
}
\t \t </style>
\t </head>
\t <body>
\t \t <div class="container-fluid">
\t \t \t <div class="col-md-12">
\t \t \t \t <div class="grid-stack" style="margin-top: 20px;">
\t \t \t \t \t <div class="grid-stack-item"
\t \t \t \t \t \t data-gs-x="0" data-gs-y="0"
\t \t \t \t \t \t data-gs-width="1" data-gs-height="1">
\t \t \t \t \t \t \t <div class="grid-stack-item-content">BOX 1</div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="grid-stack-item"
\t \t \t \t \t \t data-gs-x="2" data-gs-y="0"
\t \t \t \t \t \t data-gs-width="1" data-gs-height="1">
\t \t \t \t \t \t \t <div class="grid-stack-item-content">BOX 2</div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t \t <script type="text/javascript">
\t \t $(function() {
\t \t \t var options = {
\t \t \t \t cellHeight: 80,
\t \t \t \t width: 4
\t \t \t };
\t \t \t $('.grid-stack').gridstack(options);
\t \t });
\t \t </script>
\t \t <!-- Scripts -->
\t \t
\t </body>
</html>