Question

我正在使用Bootstrap 3.3.6并尝试使我的列（例如col-sm-4）“流动”，因此它们可以使整个垂直页面空间无间隙。我可以通过以下图片来形象化我的问题：layout with a lot of gaps。

您可以在给定的图片上看到较低的列和行有点错位并且不会真正“流动”。我想要实现的是这样的： wanted layout

在以下MWE上，您可以体验到这种效果：

.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 33.33333333%;
}

.container-fluid:before,
.container-fluid:after {
  display: table;
  content: " ";
}

.container-fluid:after {
  clear: both;
}

    <div class="container-fluid">
      <div class="col-sm-4">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit cumque totam! Doloremque, culpa, tempore sunt cupiditate nisi pariatur nobis debitis quisquam dolore libero velit laboriosam voluptatum rerum praesentium hic iste voluptates. </p>
      </div>
      <div class="col-sm-4">
        <h2>Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, officia nemo saepe totam nihil quia nostrum provident amet repellendus neque ut deserunt temporibus unde! Voluptatem, quis, illo, veniam, minus ipsum earum quos autem quidem praesentium impedit obcaecati doloremque vitae esse voluptas cupiditate magnam dolorem blanditiis doloribus facilis eum eligendi architecto recusandae maxime possimus fugiat adipisci ullam aliquid iusto et eaque. </p>
      </div>
      <div class="col-sm-4">
        <h2>Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, officia nemo saepe totam nihil quia nostrum provident amet repellendus neque ut deserunt temporibus unde! Voluptatem, quis, illo, veniam, minus ipsum earum quos autem quidem praesentium impedit obcaecati doloremque vitae esse voluptas cupiditate magnam dolorem blanditiis doloribus facilis eum eligendi architecto recusandae maxime possimus fugiat adipisci ullam aliquid iusto et eaque. </p>
      </div>
      <div class="col-sm-4">
        <h2>Sit</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, odit cumque totam! Doloremque, culpa, tempore sunt cupiditate nisi pariatur nobis debitis quisquam dolore libero velit laboriosam voluptatum rerum praesentium hic iste voluptates. </p>
      </div>
      <div class="col-sm-4">
        <h2>Amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio rerum consectetur cumque magni dolorem id cum non ab voluptates. Quia, dolore illum esse harum error impedit magni officiis ipsa ab tempore pariatur provident sapiente architecto fugit
          sit sequi amet ratione eaque molestias magnam possimus culpa explicabo. Velit, aspernatur rerum amet odio suscipit enim dolor quam itaque ipsa pariatur earum repellat natus dolore porro dolorem corrupti at. </p>
      </div>
    </div>

您可以看到，较低的列以不同的方式填充垂直空间，基于哪个较大列较大/较小。我的目标是使用整个垂直空间，没有间隙。

P.S。我已经习惯在堆栈溢出时搜索解决方案，但突然没有运气：问题，首先看起来试图解决一些问题，解决另一个问题（here，here和{{3} }）。这个列出的解决方案对我没有帮助。

如何使用引导程序使列的内容“流动”无间隙

0 个答案: