当前位置: 首页 > 面试题库 >

在Bootstrap 4中垂直堆叠的列之间增加间距

太叔鹏云
2023-03-14
问题内容

不幸的是,似乎没有一种好方法来管理在某些断点处从水平堆栈过渡到垂直堆栈的列之间的垂直间距。涉及表单时似乎确实有解决方案,但这不是这里的情况。我已经尝试过此解决方案,但是当有多个列排成一行时,它不起作用。

为了说明我的情况,这是HTML的结构:

<body>

  <div class="container">

    <div class="row">

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

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

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

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

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

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

    </div>

  </div>

</body>

在中等设备大小(md)及以上的情况下,我希望在列的两个“行”之间存在间距,但在3列的“第一行”之上不存在间距,而在列的“第二行”之下不存在间距3列。当这些列垂直堆叠在中型设备尺寸(md)以下时,我希望每列之间都留有间距,但第一个子级以上没有间距,最后一个子级以下没有间距。

理想情况下,无论行中包含多少列(例如3、5、6、12),该解决方案都将有效。


问题答案:

这是我最终完成这项工作的方式:

.row [class*="col-"] { 
   @extend .mb-4;

   &:last-child {
     @extend .mb-0;
   }

   @extend .mb-md-5;

   &:nth-last-of-type(1),
   &:nth-last-of-type(2),
   &:nth-last-of-type(3) {
     @extend .mb-md-0;
   }
}


 类似资料:
  • 问题内容: 我敢肯定有一个解决此问题的简单方法。基本上,如果我有两列,如何在它们之间添加一个空格? 例如,如果html是: 输出将是彼此相邻的两列,占据了页面的整个宽度。假设将宽度设置为,则每个div都会很宽。 如果我想在两者之间留出空间,该如何实现?显然,通过引导程序自动使div大小成为补偿大小的每个大小 问题答案: 您可以使用此处记录的类来实现列之间的间距。间距是一致的,因此所有列均正确排列。

  • 如何在div之间添加垂直空间。这里是否可以添加引导类?有什么帮助吗? 下面是我的代码片段:

  • 问题内容: 我有一个简单的引导网格布局。我不希望这些列即使在小型设备上也垂直堆叠。 问题答案: 这些列是垂直堆叠的,因为您使用的是 Bootstrap 4 ,并且不再使用中缀。只需使用..

  • 我有两个flex项目在一个包装在一列中的容器中,两个盒子之间有一个很大的空间,我尝试使用

  • 使用jfreechart fx渲染带有垂直刻度标签的时间序列图表时,标签意外地与域轴重叠,有时在调整大小时会发生更改。我无法用Swing或纯Java2D重现这一点,如图所示。我欢迎任何指导。

  • 网格视图的项目 网格视图布局 由于某些原因,网格视图之间仍然有空格,我将尝试所有可能的解决方案,但仍然无法实现。不知怎么的,图像(项目)的每一边都有一个间隙。我只想让所有的图像之间没有空格。i、 e instagram网格视图(靠近) 提前感谢您 解决办法 所以我已经想好如何改变整个事情,使两者之间没有差距。和Gridview.xml仍然保持不变。 这将是项目.xml: