html - CSS Bootstrap 3 网格杂志像专栏

Question

我很难设计我的网格以跟随杂志之类的专栏。下面是屏幕截图。我无法删除行之间的空白，因为行将遵循最高的子高度。

有什么解决方法可以删除空格？所以我的第二行将从列中每个文本的结尾开始

对不起，我真的是 CSS 新手。

请在下面找到我的代码:

.row
    .col-md-4
        p
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus convallis arcu, vel porta arcu vestibulum eget. Donec ut luctus elit. Aliquam eget semper urna. Vivamus ornare bibendum leo, ac interdum felis pharetra sit amet. In et tortor porttitor, dignissim ante at, fringilla tellus. Morbi at ante in purus fermentum pulvinar. Nunc eu dui vitae erat sagittis tristique. Nullam tristique at libero sed semper. Praesent ac eleifend quam, quis porttitor dui.
            Suspendisse tempus eu erat sit amet imperdiet. Suspendisse scelerisque turpis id purus suscipit mattis. Fusce feugiat est ut nulla lobortis imperdiet. Etiam ullamcorper libero et elementum cursus. Pellentesque eget elementum augue. Etiam ullamcorper lacinia nunc, ullamcorper pulvinar massa volutpat ut. Aenean condimentum ipsum vehicula, condimentum nunc in, elementum libero. Vivamus ornare pellentesque sem, nec convallis justo convallis non. Mauris malesuada aliquam auctor. Donec blandit ultricies risus. Nullam vehicula orci sed felis molestie, sit amet condimentum odio ultricies. Ut faucibus.
    .col-md-4
        p
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam orci enim, ullamcorper et venenatis ac, vehicula egestas velit. Donec non dolor felis. Pellentesque blandit urna nec magna posuere condimentum. Aenean viverra, dui interdum placerat imperdiet, ante ligula suscipit augue, a dapibus lacus elit in sem. Etiam tempus massa iaculis accumsan pulvinar. Maecenas commodo mauris vitae commodo sagittis. Praesent tempus, est quis faucibus accumsan, nisi massa congue mi, et vehicula felis leo sed libero.
            Maecenas ultricies suscipit diam quis laoreet. Morbi interdum sollicitudin nibh nec venenatis. Nunc sed scelerisque purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam imperdiet lectus sagittis, venenatis massa eu, porttitor arcu. Suspendisse eu nulla scelerisque risus luctus pulvinar nec eget ligula. Aenean tincidunt ligula viverra venenatis lobortis. Donec sit amet elit in nisi pellentesque rhoncus. Pellentesque sit amet ante dignissim, pulvinar magna at, consequat tellus.
            In vestibulum nibh quam. Cras id erat quam. Ut eu lectus ornare urna interdum hendrerit nec vel libero. Aliquam eu tempor tortor. Etiam fermentum sem vitae dui volutpat, vitae scelerisque neque dictum. Duis dapibus non est ac malesuada. Nunc congue dolor vel magna consectetur elementum. Integer consequat ligula at iaculis bibendum. Nulla varius eros a aliquam tempus. Maecenas vestibulum tempus odio quis gravida.
    .col-md-4
        p
            Nulla facilisi. Integer ornare tristique tortor non condimentum. Proin sem velit, varius in est vitae, congue mattis quam. Vivamus sit amet justo orci. Nulla vel sem sed dolor ultricies congue at ac risus. Ut at euismod odio. Duis orci nisl, auctor id dapibus sit amet, tincidunt non risus. Praesent at enim rutrum, sagittis dui non, placerat purus. Suspendisse cursus augue in ante dignissim vehicula. Phasellus id mi non ipsum malesuada fringilla nec nec nunc. Nullam ac lectus neque. Lorem ipsum dolor sit.
.row
    .col-md-4
        p
            Nulla facilisi. Integer ornare tristique tortor non condimentum. Proin sem velit, varius in est vitae, congue mattis quam. Vivamus sit amet justo orci. Nulla vel sem sed dolor ultricies congue at ac risus. Ut at euismod odio. Duis orci nisl, auctor id dapibus sit amet, tincidunt non risus. Praesent at enim rutrum, sagittis dui non, placerat purus. Suspendisse cursus augue in ante dignissim vehicula. Phasellus id mi non ipsum malesuada fringilla nec nec nunc. Nullam ac lectus neque. Lorem ipsum dolor sit.
    .col-md-4
        p
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus convallis arcu, vel porta arcu vestibulum eget. Donec ut luctus elit. Aliquam eget semper urna. Vivamus ornare bibendum leo, ac interdum felis pharetra sit amet. In et tortor porttitor, dignissim ante at, fringilla tellus. Morbi at ante in purus fermentum pulvinar. Nunc eu dui vitae erat sagittis tristique. Nullam tristique at libero sed semper. Praesent ac eleifend quam, quis porttitor dui.
            Suspendisse tempus eu erat sit amet imperdiet. Suspendisse scelerisque turpis id purus suscipit mattis. Fusce feugiat est ut nulla lobortis imperdiet. Etiam ullamcorper libero et elementum cursus. Pellentesque eget elementum augue. Etiam ullamcorper lacinia nunc, ullamcorper pulvinar massa volutpat ut. Aenean condimentum ipsum vehicula, condimentum nunc in, elementum libero. Vivamus ornare pellentesque sem, nec convallis justo convallis non. Mauris malesuada aliquam auctor. Donec blandit ultricies risus. Nullam vehicula orci sed felis molestie, sit amet condimentum odio ultricies. Ut faucibus.
    .col-md-4
        p
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam orci enim, ullamcorper et venenatis ac, vehicula egestas velit. Donec non dolor felis. Pellentesque blandit urna nec magna posuere condimentum. Aenean viverra, dui interdum placerat imperdiet, ante ligula suscipit augue, a dapibus lacus elit in sem. Etiam tempus massa iaculis accumsan pulvinar. Maecenas commodo mauris vitae commodo sagittis. Praesent tempus, est quis faucibus accumsan, nisi massa congue mi, et vehicula felis leo sed libero.
            Maecenas ultricies suscipit diam quis laoreet. Morbi interdum sollicitudin nibh nec venenatis. Nunc sed scelerisque purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam imperdiet lectus sagittis, venenatis massa eu, porttitor arcu. Suspendisse eu nulla scelerisque risus luctus pulvinar nec eget ligula. Aenean tincidunt ligula viverra venenatis lobortis. Donec sit amet elit in nisi pellentesque rhoncus. Pellentesque sit amet ante dignissim, pulvinar magna at, consequat tellus.
            In vestibulum nibh quam. Cras id erat quam. Ut eu lectus ornare urna interdum hendrerit nec vel libero. Aliquam eu tempor tortor. Etiam fermentum sem vitae dui volutpat, vitae scelerisque neque dictum. Duis dapibus non est ac malesuada. Nunc congue dolor vel magna consectetur elementum. Integer consequat ligula at iaculis bibendum. Nulla varius eros a aliquam tempus. Maecenas vestibulum tempus odio quis gravida.

Answer 1

你应该重新安排你的布局，使用这种定位(每列添加它们，而不是每行):

<div class="container">
  <div class="col-md-4">
    <p>Article 1</p>
    <p>Article 4</p>
    <p>Article 7</p>
  </div>
  <div class="col-md-4">
    <p>Article 2</p>
    <p>Article 5</p>
    <p>Article 8</p>
  </div>
  <div class="col-md-4">
    <p>Article 3</p>
    <p>Article 6</p>
    <p>Article 9</p>
  </div>
</div>

Bootply example