时间戳

首页 > 解决方案 > 如何在分配布局大小时让引导网格系统填充空白？

html - 如何在分配布局大小时让引导网格系统填充空白？

问题描述

我有 4 个 div，前 3 个 div 并排出现，但第四个必须出现在 3 之下。问题是第三个 div 更长，第四个 div 移动到第三个 div 的末尾，这导致很多空白。如何向上移动 div 并仍然保持引导网格布局？

我想将棕色 div 向上移动并将其放入那里的空白区域。我怎样才能做到这一点？

<!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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-4" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
    </div>
    <div class="col-sm-4" style="background-color:red;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et doloreLorem

    </div>

    <div class="row">
      <div class="col-sm-12" style="background-color:brown;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
      </div>
    </div>

  </div>
  </div>

</body>

</html>

标签： htmlcsstwitter-bootstrap

解决方案

make line 29 look like this... 

    <div class="row m-0">

推荐阅读