html - 较小分辨率下列之间的顶部或底部边距

Question

对于这样的模式:

<div class="row">

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

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

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

</div>

桌面上的输出是

+---+---+---+
| A | B | c |
+---+---+---+

当我调整浏览器窗口大小时模拟标签/手机时，输出变为

+---+
| A |
+---+
| B |
+---+
| C |
+---+

预期的输出是

+---+
| A |
+---+
+---+
| B |
+---+
+---+
| C |
+---+

即上边距或下边距。目前，我正在使用 clear:both div，每个列之间的高度为 10px 来实现这一点。

<div class="row">

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

      <div class="clear"></div> <!-- want to avoid using this -->

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

      <div class="clear"></div> <!-- want to avoid using this -->

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

</div>

虽然这样可以完成工作，但我想知道是否有更有效的方法来实现它？

Answer 1

 <div class="row wrapper">

    <div class="col-md-4">
      Col A
    </div>

    <div class="clear"></div> <!-- want to avoid using this -->

    <div class="col-md-4">
      Col B
    </div>

    <div class="clear"></div> <!-- want to avoid using this -->

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

 </div> <!-- parent container -->

CSS /* 使用媒体查询来应用 CSS 并编辑你自己的断点 */

 @media screen and (max-width:767px){ 

  .wrapper .col-md-4{
     margin-top:20px; /* use whatever gap u need */
   }

   .wrapper > *:first-child{  /* targeting the first child to remove top margin */
       margin-top:0;
   }
  }