Bootstrap网格对齐

Question

我试图使用Bootstrap＆＃39;博客帖子的网格。我希望它们在彼此之间保持一致 - 但我似乎无法弄清楚如何。我把我的col-md放在一个容器里，然后放在一排。我用Google搜索了一下，但似乎没有一个直接的答案，或者我找不到它。

现在的样子

我希望它看起来如何

代码

<div class="container">

<div class="row">

    <div class="col-md-4">

        <div class="blogpost">

            <div class="pad">

                <h2>Designed by Apple - Intention</h2>
                <p>Here, simple phrases paired with elegant visuals describe the thoughts and emotions that go into creating each Apple product.</p>

            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="blogpost">

            <img src="assets/img/1.jpg" alt="">

            <div class="pad">

                <h2>Official launch today</h2>
                <p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>

            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="blogpost">

            <img src="assets/img/1.jpg" alt="">

            <div class="pad">

                <h2>Official launch today</h2>
                <p>Duis id sagittis ipsum. Proin gravida libero augue. Vivamus dignissim ipsum blandit magna tempus, porta porta nisi pellentesque. Sed ligula lorem, semper non sem maximus, suscipit tincidunt nisi. Etiam pulvinar quam purus, at fringilla erat ultricies ac. Aenean vitae laoreet ligula.</p>

            </div>

        </div>

    </div>

    <div class="col-md-4">

        <div class="blogpost">

            <div class="pad">

                asdasd

            </div>

        </div>

    </div>

</div>

Answer 1

要获得您想要的内容，您的模板不必按行排列，而只能以这种方式排列，每列中的元素将在彼此之下，而不会受到行所施加的空间限制。为此，请删除外部

试一试这个sample