Question

我有一个使用数据库表自动填充的引导页面。我的问题是，使用我正在使用的当前代码，它最终看起来像这样： Current Look

有什么方法可以自动将所有内容移动到这样的位置？ Proposed Look

当前代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="block block-transparent">
                <div class="content tasks">
                    <div class="task-item priority-<%=importancecolor%> float">
                        <div class="task-item-content">
                            <div class="task-item-head"><%=rs("Summary")%></div>
                            <div class="task-item-subhead"><%=rs("detail")%></div>
                            <div class="task-item-date"><i class="icon-calendar"></i>&nbsp;<%=rs("targetcompletiondate")%>&nbsp;&nbsp;&nbsp;<i class="icon-user"></i>&nbsp;<%=rs("assignedto")%></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

首先，你需要知道bootstrap与网格一起工作，这就是为什么有列和行。如果你想实现你想要的，我建议使用你自己的自定义CSS。 div将根据内容的长度进行扩展。我的css和html如下所示：

＆＃13;

	<!DOCTYPE html>
	<html>
	<head>
	    <title>Masonry</title>
	<style>
	.col-1{background: #2ecc71;width: 30%;float: left;}
	.col-2{background: #34495e;width: 30%;float: left;}
	.col-3{background: #2980b9;width: 30%;float: left;}
	.col-4{background: #c0392b;width: 30%;float: left;}
	.col-5{background: #7f8c8d;width: 30%;float: left;}
	</style>
	</head>
	<body>

	<div class="wrap">
	    <div class="col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia optio nihil rerum et deserunt tempore quidem, voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
	    <div class="col-2"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
	    <div class="col-3">id itaque corrupti?</div>
	    <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam fugiat consequuntur molestias quisquam nemo enim perferendis praesentium magnam, perspiciatis, itaque labore nesciunt accusantium assumenda quas incidunt aut animi veritatis cum.</div>
	    <div class="col-5"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div>
	</div>

	</body>
	</html>

＆＃13;

Answer 2

如果我理解正确，你需要为你的网格设置一种砖石样式，就像Pinterest一样。

您可以使用flexbox实现它（检查https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a），或者，如果您希望继续使用Bootstrap网格，请尝试使用JavaScript（https://masonry.desandro.com/），我强烈建议您不要使用JavaScript您可以在CSS中执行的操作（如果您没有浏览器兼容性问题）。

在bootstrap中避免大间距？

2 个答案: