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

即顶部或底部边缘。目前，我在每个cols之间使用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

试试这个：

<强> HTML

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


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


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

<强> CSS

.mbottom{
  position: relative;
  margin-bottom: 20px; /* The size of the gap you want */
}

Answer 2

 <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 / *使用媒体查询来应用tte css＆amp;编辑你自己的断点* /

 @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;
   }
  }

Answer 3

Uss CSS媒体查询，如下所示：

@media (max-width: 640px) {
    .col-md-4{margin-bottom:10px;}
}

当屏幕宽度低于margin-bottom时，使用上面的代码会将10px .col-md-4 640px提供给{{1}} div。

Answer 4

如果不使用媒体查询，您只需创建一个特定的类并添加margin-bottom而不是margin-top。当然，如果你不介意桌面上的下边距，但我认为你的列和其他内容之间会有一些差距。

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

4 个答案: