问Gridstack:更改项目之间的空格
EN

Stack Overflow用户

提问于 2016-06-28 00:42:20

回答 2查看 1.8K关注 0票数 1

希望我只是遗漏了一些简单的东西，但是两个项目("grid-stack-item“div)之间有一点太多的空间。我想要一个网格，其中的项目是更接近一点。我希望也许有人有一个codepen或小提琴，展示了如何减少项目之间的空间(缩小列)。

相关代码：

<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

回答 2

Stack Overflow用户

发布于 2016-08-05 22:52:59

您需要将第二个grid-stack-item的data-gs-x属性设为1而不是2，因为每个grid-stack-item的宽度只有1。

票数 0

Stack Overflow用户

发布于 2021-02-11 03:40:33

这是一个四年前的队列。但您可以通过在网格选项中添加margin参数来更改该间距。默认边距值为10。我可以是整数(px)或字符串(例如：'2em'，'20px'，'2rem')

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

source document

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38059127

复制

相似问题

问Gridstack:更改项目之间的空格
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Gridstack:更改项目之间的空格EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Gridstack:更改项目之间的空格
EN