Bootstrap 什么是间距md?

Bootstrap Spacing what is md?

上图div标签中的md是什么意思?

  1. mx-auto:x 轴上的边距设置为自动,换句话说,将元素水平居中。

  2. ml-md-0: 将左边距设置为 0 ?

  3. mr-md-auto: 将 margin right 设置为 auto ?

如果1,2,3是正确的,那么上面的类岂不是既多余又自相矛盾?

从1.元素边距设置为auto,但随后在2.元素边距再次设置为0。

谁能解释一下那三个 bootstrap 类 在做什么?

根据该元素的响应能力(断点),术语“md”指的是中等。

您还有小号 (sm)、大号 (lg) 和特大号 (xl)。

您可以在此处查看有关 bootstrap 的网格选项的更多详细信息: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Bootstrap 是 mobile-first, meaning whatever you define at smaller breakpoints 将级联到更大的断点,直到被覆盖,所以:

  • mx-auto: 移动设备及以上设备水平居中(即所有设备)
  • ml-md-0: 仅对 md 及以上设备应用 ml-0(移动设备和 sm 设备仍将具有 mx-auto)
  • mr-md-auto: 仅对 md 及以上设备应用 mr-auto(移动设备和 sm 设备仍将具有 mx-auto)

请注意 class 字符串的列出顺序无关紧要,因此例如 mr-md-auto ml-md-0 mx-auto 会产生相同的效果。 Bootstrap 将按 mobile-first 顺序应用其样式。