1

希望我只是遗漏了一些简单的东西，但是项目（“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>

4

2 回答 2

0

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

于 2016-08-05T14:52:58.993 回答
0

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

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

源文件

于 2021-02-10T19:40:33.363 回答