时间戳

首页 > 解决方案 > 如何根据设备尺寸指定边距？

css - 如何根据设备尺寸指定边距？

问题描述

我有一个角度/引导网络应用程序。我想在 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>

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

标签： cssangularbootstrap-4

解决方案

$spacers您可以在 sass中向地图添加新尺寸。

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

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

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


推荐阅读