【问题标题】:Setting spacing per breakpoint in Bootstrap 5在 Bootstrap 5 中设置每个断点的间距
【发布时间】:2022-07-25 20:27:47
【问题描述】:

我认为可以在 Bootstrap 5 中为每个断点设置间距(边距/填充)?

mb-sm-2 之类的东西似乎不起作用...应该...?

我检查了the docs,但不太明白它在说什么 - 听起来好像支持断点... ????‍♂️

【问题讨论】:

  • 如果,在这里,您只想设置小的设备断点。所以,你需要使用这个<div class="mb-sm-2 mb-md-0">My Text</div>
  • 哦,所以你只能使用 sm 断点,如果你另外指定 md(或其他)......?
  • 当你只调用sm 时,它会调用小设备和上断点。因此,如果,您只想调用一个断点。因此,您需要根据它添加停止的上断点。希望,你明白。

标签: bootstrap-5


【解决方案1】:

是的。 Bootstrap 5 支持断点。 如果您想为超小尺寸(

<div class="mb-2"></div>

但这会影响所有维度,因为它不在任何指定的媒体查询下。 如果要在小尺寸(≥576px)上指定边距。你用

<div class="mb-sm-2"></div>

这将影响等于或大于 576 像素的尺寸。如果您希望仅在小尺寸上进行。你用

<div class="mb-sm-2 mb-md-0"></div>

等于或大于 768px 和小于 576px 的尺寸将没有指定的边距。

【讨论】:

    【解决方案2】:

    Bootstrap 5 对断点使用了与以前版本不同的语法。 可用的断点如下: |断点类|中缀|维度| |:--------|:---------|:------------| |X-小 |无 |

    这里是一个特殊的例子:为了获得 0 边距和 0 填充,仅适用于分辨率较低的屏幕,如 X-Small(

    class="m-0 p-0 m-sm-4 p-sm-4"
    

    其中 m-0 和 p-0 仅适用于

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-09-17
      • 2015-01-10
      • 1970-01-01
      • 2020-08-21
      • 1970-01-01
      • 1970-01-01
      • 2015-12-11
      • 1970-01-01
      相关资源
      最近更新 更多