Question

我可以使用bootstrap实现如下所示的多列布局吗？

我知道由于行/列布局系统，以下内容很容易实现，但我故意在上面包含一个高级示例，看它是否可能...

Answer 1

如果您习惯使用JavaScript，则可以使用masonryJS https://github.com/desandro/masonry

只有CSS，除非高度固定，否则无法制作它，我认为不会这样，因为我猜您正在寻找响应。

Answer 2

你绝对可以使用Bootstrap实现它。这种设计只需要正确嵌套div。查看下面的例子 -

工作代码段

＆＃13;

.border {
  border: 2px solid;
  border-color: blue;
  margin-top: 5px;
 }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body>
<div class="container">
<div class="row">

<div class="col-lg-2">
<div class="border col-lg-12">
section A<br>
section A<br>
section A<br>
section A<br>
section A<br>
section A<br>
section A<br>
section A<br>

</div>
<div class="border col-lg-12">
section B<br>
section B<br>
section B<br>
section B<br>

</div>
</div>

<div class="col-lg-8">
<div class="border col-lg-7">
section C<br>
section C<br>
section C<br>

</div>
<div class="border col-lg-5">
section D<br>
section D<br>
section D<br>
</div>
<div class="border col-lg-5">
section E<br>
section E<br>
section E<br>
section E<br>
section E<br>
section E<br>
</div>
<div class="col-lg-7">
<div class="border col-lg-12">
section F<br>
section F<br>
section F<br>
</div>
<div class="border col-lg-12">
section G<br>
section G<br>
section G<br>
</div>
</div>
<div class="border col-lg-12">
section H<br>
section H<br>

</div>
</div>



</div>
</div>
   
</body>
</html>

＆＃13;

注意：我仅使用col-lg-*课程，因此请全屏观看。

Answer 3

您可以尝试输入固定高度值并调整浮动值吗？

带有引导程序的多列布局

3 个答案: