如何根据设备大小指定边距？

Question

我有一个angular/bootstrap web应用。我想在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>

但是，这是行不通的。我在这里做错了什么？

Answer 1

您可以在sass中向$spacers映射添加新的大小。

这是_variables.scss中的原始$spacer变量/映射...

$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文件之前，...and包含或导入它。

像这样..。

// 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
);

​

除了边距和填充实用程序类之外，不能确定此更改的程度。就像我说的，没有经过测试。

​