Question

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

我的divs表现得很荒谬，因为我可能错过了一些东西。我尝试了各种解决方案，如显示：内联，垂直对齐：顶部，浮动和清除等......但没有任何效果。

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

这是我目前的代码：

    <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>

Answer 2

如果您使用inline-block，请确保您拥有此CSS声明：

vertical-align: top

这样一切都在div的顶部对齐。如果需要，您可以随时使用边距或填充来减少压力。

希望这可以解决您的需求！

Answer 3

有时最简单的解决方案是最合乎逻辑的解决方案。

我发现每篇文章下都有一个<br>标签，这导致每篇文章都被推下来。

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

3 个答案: