为什么这个Bootstrap 3列没有正常工作？

Question

看看这个page link并滚动到底部，调整窗口大小以查看我的意思，

似乎在平板电脑尺寸（纵向视图 - 例如在ipad尺寸上）我的一个列; “服务”部分中的最后一项，不是很正常，有人可以帮我查看吗？

<div class="col-md-3 col-sm-6">
    <div class="service-item">
        <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-shield fa-stack-1x text-primary"></i>
        </span>
        <h4><strong>Clinics: Josef Maier</strong></h4>
        <p>Josef Maier:  level 3 course designer</p>
        <p>Coming this October!</p>

        <a href="clinics.html" class="btn btn-light">Learn More</a>
    </div>
</div>

实际上页面底部的所有内容都编码相同，但是当调整为平板电脑纵向大小时，最后一个会被推下来...

有人可能会认为其中一个服务项目中的段落文本太长了，但我已经尝试过调整它，以便段落文本和标题项更短，但仍然会发生。

Answer 1

您的列工作正常，问题是在您的第一个col-md-3 col-sm-6中有<br>

<div class="col-md-3 col-sm-6">
       <div class="service-item">
           <span class="fa-stack fa-4x">
           <i class="fa fa-circle fa-stack-2x"></i>
           <i class="fa fa-bullhorn fa-stack-1x text-primary"></i>
                        </span>
           <h4>
                <strong>Lessons</strong>
           </h4>
           <p>Learn in a group or individually</p>
           <br> /*here is the br*/

           <a href="services.html#lessons" class="btn btn-light">Learn More</a>
      </div>
</div>

因此，您的第一个col-md-3大于第二个col-md-3，因此它会将您的最后<br>一行推到下面。

要解决此问题，只需删除col-sm-6，并在col-sm-6更改的内容设置为{{1}}的高度时阻止该行为，例如275px 这是最大的。

Answer 2

这是在您的网站上运行pesticide的结果

网格工作正常，实际上，第一个col-md-3比第二个col-md-3长，所以它会将最后一个height: 250px推到下一行。

我刚刚将service-item添加到了课程<h:form> <h:commandButton value="Registriraj" action="#{noviKorisnik.kreiraj()}" /> </h:form>

快乐的编码！