html - 每个 div 都低于前一个，没有边距或填充问题

Question

使用 Bootstrap3 创建自定义 WordPress 主题。

我的 div 表现得很荒谬，因为我可能错过了什么。我尝试了各种解决方案，例如 display: inline、vertical-align: top、floats 和 clears 等...但没有任何效果。

这是我目前的样子，一切都应该是内联的:

这是我当前的代码:

    <div class="container content">
                    <!-- CONTENT -->
                    <div class="col-md-12 blog-posts">                    
                    <article class="single-article col-md-4">
                    <a href="myweb.com/blog/tempus-non-auctor/">
                    <img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px">                    </a>
                    <h1 class="article-headline"><a href="myweb.com/blog/tempus-non-auctor/">tempus non, auctor</a></h1>
                    <h4 class="article-time-stamp"><i>Posted on July 15th, 2016</i></h4>
                    <p></p><p>Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.<br><a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"><i>Read more</i></a></p>
<p></p>                    </article>                                       
</div> <!-- end blog posts part -->
<!--END content wrapper -->             
</div>

和CSS:

.single-article {
    padding-bottom: 10%;

    em {
        font-style: italic;
    }
}

.article-headline {

    padding-bottom: 2%;

    a {
        color: $purple-color;
    }
}

.article-time-stamp {
    font-size: 1em;
    padding-bottom: 1%;
}

有什么建议吗？谢谢

Answer 1

col-md-4 嵌套在 col-md-12 下。你不能像那样嵌套列。你需要在中间排一行。那是不正确的 Bootstrap。

<div class="row">
  <div class"col-md-12">
    <div class="row">
      <div class="col-md-4">
        <p>Blah Blah</p>
      </div>
      <div class="col-md-4">
        <p>Blah Blah</p>
      </div>
      <div class="col-md-4">
        <p>Blah Blah</p>
      </div>
    </div>
  </div>
</div>