Gridstack：更改项目之间的空间答案

【问题标题】：Gridstack: Change space between itemsGridstack：更改项目之间的空间
【发布时间】：2016-10-29 18:32:36
【问题描述】：

希望我只是遗漏了一些简单的东西，但是项目（“grid-stack-item”div）之间的空间太大了。我想要一个网格，其中项目更靠近一点。我希望也许有人有一个代码笔或小提琴来展示如何减少项目之间的空间（缩小列）。

相关代码：

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

【问题讨论】：

标签： gridstack

【解决方案1】：

您需要将第二个 grid-stack-item 的 data-gs-x 属性设置为 1 而不是 2，因为每个 grid-stack-item 的宽度仅为 1。此时您有一个空白空间，因为你已经告诉它让它空着。

【讨论】：

【解决方案2】：

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

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

source document

【讨论】：