Question

我正在使用带有三列的Bootstrap来显示新闻文章

<div class="col-md-4">
  <h4>Title</h4>
  <div>Article variable text</div>
</div>

问题是文章水平对齐

所以不要这样：

 xxx xxx xxx
 xxx xxx xxx
     xxx xxx
 xxx     xxx
 xxx xxx xxx
 xxx xxx
 xxx     xxx
     xxx xxx
 xxx xxx xxx
 xxx xxx 
         xxx

我有这个：

 xxx xxx xxx
 xxx xxx xxx
     xxx xxx
         xxx
         xxx

 xxx xxx xxx
 xxx xxx xxx
 xxx     xxx
 xxx 

 xxx xxx xxx
 xxx xxx

如何以简单的方式解决对齐？

Answer 1

你必须制作3 col-md-4并在其中另一行，然后你可以将你的文章用于col-md-12

在Emmet中，这看起来像这样

.container>.row>.col-md-4(>.row>.col-md-12*10)*3

Answer 2

一种选择是使用＆＃39; column-width＆＃39; ..

这样的CSS3方法

http://www.bootply.com/120682

另一种选择是像Isotope或Masonry这样的插件。以下是使用Isotope插件的示例...

http://www.bootply.com/108697

Answer 3

像这样：

<div class="row">
    <!-- this is the left column. -->
    <div class="col-md-4">
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
    </div>

    <!-- this is the center column. -->
    <div class="col-sm-4">
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
    </div>

    <!-- this is the right column. -->
    <div class="col-sm-4">
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
        <article>
            <h4>Title</h4>
            <p>Text</p>
        </article>
    </div>
</div>

具有垂直流体的Bootstrap柱

3 个答案: