Html 为什么我的感冒破成中等大小？

我是一名高中网页设计老师，目前正在教我的学生如何构建自己的网格框架。我使用的是floated.col方法，因为它很容易理解，并且从关于float和clears的教学中很好地流动。下一步我将进入flexbox

我遇到了一个奇怪的问题。在中等大小的屏幕上，并且只有该断点内的特定大小，网格似乎“中断”，最后一个.col下降到下一行。这里有一个链接显示了它

这是HTML文件

<!-- Link to Font Awesome v4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Section from page that is 'breaking' at certian md sizes -->
<section id="features">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6">
        <i class="fa fa-map-marker" aria-hidden="true"></i>
        <h2>Mark Locations</h2>
        <p>Mappy lets you save important locations like home, work, or even where you parked your car!</p>
      </div>
      <div class="col-lg-3 col-md-6">
        <i class="fa fa-map" aria-hidden="true"></i>
        <h2>View Full Maps</h2>
        <p>Mappy also lets your look at up-to-date maps of towns, cities, and even the globe! </p>
      </div>
      <div class="col-lg-3 col-md-6">
        <i class="fa fa-map-signs" aria-hidden="true"></i>
        <h2>Get Directions</h2>
        <p>Let Mappy guide you where you want to go! Simply enter an address or location and Mappy will find the best route</p>
      </div>
      <div class="col-lg-3 col-md-6">
        <i class="fa fa-car" aria-hidden="true"></i>
        <h2>Realtime Traffic</h2>
        <p>Mappy is connected to local traffic updates, so it can always provide the fastest route to avoid jams</p>
      </div>

    </div>
  </div>
</section>

---

是否有一个类我需要构建并添加到这个类中？或者我可以改变一下我的造驴方式来完全避免这种情况？我模仿了Bootstrap3

看起来这是从“标记位置”拷贝中断到比它旁边的模块更多的行

我可以通过在col声明中添加一个最小高度为220px的类来解决这个问题

.icon-height {
   min-height: 220px;
}

<div class="col-lg-3 col-md-6 icon-height">

。图标高度{
最小高度：220px；
}

看起来这是从“标记位置”拷贝中断到比它旁边的模块更多的行

我可以通过在col声明中添加一个最小高度为220px的类来解决这个问题

.icon-height {
   min-height: 220px;
}

<div class="col-lg-3 col-md-6 icon-height">

。图标高度{
最小高度：220px；
}

每行下的列总和应为十二（12），如果遵循这一基本原则，在大多数情况下更容易识别问题。从我看到的四个地方有col-md-6，总计为24而不是12@如果把前两个和最后两个Col包装在自己的一排，会导致它下降到一个新的生产线吗？在lg尺寸，我希望所有四个都在同一条线上（因此col-lg-3）。把我所有的col都放在一行不应该有助于将它与其他东西分开吗？您希望如何在您的中屏幕设备（宽度：768px）@Tobin上显示内容。在大屏幕上，我希望所有四个col都使用col-lg-3并排显示，然后在中等大小时，我希望使用col-md-6将两个列相邻。每行下的列总和应为十二（12），如果遵循此基本原则，则在大多数情况下更容易识别问题。从我看到的四个地方有col-md-6，总计为24而不是12@如果把前两个和最后两个Col包装在自己的一排，会导致它下降到一个新的生产线吗？在lg尺寸，我希望所有四个都在同一条线上（因此col-lg-3）。把我所有的col都放在一行不应该有助于将它与其他东西分开吗？你希望如何在中屏幕设备（宽度：768px）@Tobin上显示东西。在大屏幕上，我希望所有四个col-lg-3彼此相邻，然后在中等大小上，我希望两个col-md-6彼此相邻。这确实有效！但是，此修复似乎只能修复此解决方案。有没有一种方法可以在我当前的框架中添加或修改我的内容，这样就不会发生这种情况？或者这是对这种“网格框架”风格的限制吗？当我使用网格框架遇到这个问题时，我主要使用这个最小高度修正。我只在少数模块上遇到这个问题。这确实有效！但是，此修复似乎只能修复此解决方案。有没有一种方法可以在我当前的框架中添加或修改我的内容，这样就不会发生这种情况？或者这是对这种“网格框架”的限制吗？当我使用网格框架遇到这个问题时，我主要使用这个最小高度修正，因为我只在几个模块上遇到这个问题。