如何根据设备尺寸指定边距？答案

【问题标题】：How do I specify a margin based on device size?如何根据设备尺寸指定边距？
【发布时间】：2020-08-25 06:01:51
【问题描述】：

我有一个 angular/bootstrap 网络应用程序。我想在 md、xl、lg 设备上指定 40 px 的左边距，在 sm 设备上指定 0 px 的左边距。我曾尝试在styles.scss 中添加一个分隔符，如下所示：

$spacer: 1rem;

.ml-6{
  margin-left:($spacer*2.5);
}

然后在我的html中我有类似的东西

<div class="ml-md-6 ml-sm-0 ml-xl-6 ml-lg-6">
          //some code
      </div>

但是，这不起作用。我在这里做错了什么？

【问题讨论】：

.ml-6 这与您元素上的任何类都不匹配。
@disinfor 这些用于响应支持的中缀类。
@Simplicius 哦，没错！看来我今天工作太久了。只是设置错误。
@disinfor。没有羞耻;D

标签： css angular bootstrap-4

【解决方案1】：

您可以在 sass 中为 $spacers 映射添加新尺寸。

这是_variables.scss中的原始$spacer vars/map...

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);

因此，要向此地图添加 6th 大小，您需要添加...

$spacers: map-merge(
  (
    6: ($spacer * 2.5)
  ),
  $spacers
);

...并在 _functions.scss、_variables.scss 和 _mixins.scss 文件之后，但在所有引导其他 sass 文件之前包含或导入它。

像这样……

// import bootstrap 4 src files
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$spacers: map-merge(
  (
    6: ($spacer * 2.5)
  ),
  $spacers
);

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";

以下内容未经测试，但将新的 40px (2.5) 边距/填充间距实用程序类置于默认的 4 和 5 类之间是合乎逻辑的。

这意味着5 类的任何当前用法都需要更新为6，而您的新40px (2.5) 类将是5。

$spacers: map-merge(
  (
    5: ($spacer * 2.5),
    6: ($spacer * 3)
  ),
  $spacers
);

不确定此更改超出边距和填充实用程序类的程度。就像我说的，未经测试。

【讨论】：