Gridstack：更改项目之间的空间

时间：2016-06-27 16:42:20

标签： gridstack

希望我只是遗漏了一些简单的东西，但项目之间的空间太大了（＆＃34; grid-stack-item＆＃34; divs）。我想要一个网格，其中的项目更紧密。我希望也许有人有一个codepen或小提琴，展示了如何减少项目之间的空间（缩小列）。

enter image description here

相关代码：

＆＃13;
＆＃13; 
<html>
	<head>
		<!--JQUERY-->
		<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
		<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
		<!--Bootstrap-->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
		<!--Lodash-->
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
		<!--Gridstack-->
		<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
		
		<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
		
		<style>
			.grid-stack-item{background-color: #00CED1;}
			.red {border: 1px solid red;}
			.blue {border: 3px solid blue;}
			.red-dash {border: 3px dashed red;}
}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="col-md-12">
				<div class="grid-stack" style="margin-top: 20px;">
					<div class="grid-stack-item"
						data-gs-x="0" data-gs-y="0"
						data-gs-width="1" data-gs-height="1">
							<div class="grid-stack-item-content">BOX 1</div>
					</div>
					<div class="grid-stack-item"
						data-gs-x="2" data-gs-y="0"
						data-gs-width="1" data-gs-height="1">
							<div class="grid-stack-item-content">BOX 2</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
		$(function () {
			var options = {
				cellHeight: 80,
				width: 4
			};
			$('.grid-stack').gridstack(options);
		});
		</script>
		<!-- Scripts -->
		
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

你需要制作第二个grid-stack-item 1的data-gs-x属性而不是2，因为每个grid-stack-item的宽度只有1.此时你有一个空的空间因为你告诉它要把它留空。

答案 1 :(得分：0)

嗯，这是一个四年前的问题。但是您可以通过将 ma​​rgin 参数添加到网格选项来更改该间隙。默认边距值为 10.I 可以是整数 (px) 或字符串（例如：'2em'、'20px'、'2rem'）

var options = {
                cellHeight: 80,
                width: 4,
                margin: 5
            };

source document

相关问题
最新问题