2016-06-27 14 views
0

うまくいけば、私は単純なものを見逃しているかもしれないが、アイテム間にあまりにも多くのスペースがある( "grid-stack-item" div)。私はアイテムが少し近くにあるグリッドが欲しいです。おそらく誰かが項目間のスペースを減らす方法を示したコードペインやフィドルを持っていたと思っていました。Gridstack:アイテム間のスペースを変更する

enter image description here

関連するコード:

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

答えて

0

あなたがように、第2のグリッドスタック項目1の代わりに、2のデータ-GS-x属性を作成する必要があります各grid-stack-itemの幅は1にすぎません。空のままにしておいたので、空きスペースがあります。

関連する問題