间距（Spacing） |
您所在的位置：网站首页 › 间隔的英文缩写怎么写 › 间距（Spacing） |
|
边距和填充
赋予一个缩写class使margin或padding值在一个元素上或其中一个边缘上（包含响应式）。包含支持单一个边缘属性或全部边缘、垂直边缘、水平边缘。Class来自于Sass map，范围从.25rem到3rem。 在使用CSS网格排版？考虑使用 the gap utility吧！ 符号如果是适用于所有从xs到xxl断点的间隔通用类别，就不需加入断点缩写。因为从min-width: 0以上开始都将应用这些类别，因此不受media query的约束。但若是针对其余断点，就需要包含断点缩写。 对于xs使用固定格式{property}{sides}-{size}命名，对于sm、md、lg、xl和xxl，使用格式{property}{sides}-{breakpoint}-{size}命名。 property设定： m - 设定margin p - 设定paddingsides设定： t - 设定margin-top或是padding-top b - 设定margin-bottom或是padding-bottom s - 在LTR设定margin-left或是padding-left，RTL设定margin-right或是padding-right e - 在LTR设定margin-right or padding-right，RTL设定margin-left或是padding-left x - 同时设定*-left和*-right y - 同时设定*-top和*-bottom blank - 空白-同时设定margin或padding在元素的四个边缘size设定： 0 - 设定margin或是padding为0 1 - （预设）设定margin或是padding为$spacer * .25 2 - （预设）设定margin或是padding为$spacer * .5 3 -（预设）设定margin或是padding为$spacer 4 - （预设）设定margin或是padding为$spacer * 1.5 5 - （预设）设定margin或是padding为$spacer * 3 auto - 设定margin为auto（您也可以透过将项目增加到$spacers Sass map变数以新增更多尺寸。） 示例以下是这些类的一些代表性示例： .mt-0 { margin-top: 0 !important; } .ms-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; } 水平居中此外，Bootstrap还包括一个.mx-auto类别，用于将固定宽度的块级内容水平置中（也就是具有display: block、本身设有width的内容），是透过将水平margin设置为auto达成。 Centered element Centered element 负边距在CSS中，margin属性可以使用负值（padding不能）。这些负值的margin在默认情况下是禁用的，但可以通过在Sass中设置$enable-negative-margins: true以启用。 语法与预设的、正值margin通用类别几乎相同，在所需的大小前加入n，以下为与.mt-1相反的示例：/p> .mt-n1 { margin-top: -0.25rem !important; } 间隙使用display: grid时，您可以在父层的grid容器加上gap通用类别。这可以省去在单个网格线（display: grid容器的子项）上使用margin通用类别。Gap通用类别预设具有响应式，并且根据$spacers Sass map通用类别API产生。 Grid item 1 Grid item 2 Grid item 3 Grid item 1 Grid item 2 Grid item 3支持包括所有Bootstrap的网格断点中的响应选项，以及来自$spacers map（0–5）六个大小。这里没有.gap-auto通用类别，因为它实际上与.gap-0相同。 Sass MapsSpacing utilities are declared via Sass map and then generated with our utilities API. $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer / 4, 2: $spacer / 2, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, ); $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null); Utilities APISpacing utilities are declared in our utilities API in scss/_utilities.scss. "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: map-merge($spacers, (auto: auto)) ), "margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: map-merge($spacers, (auto: auto)) ), "margin-top": ( responsive: true, property: margin-top, class: mt, values: map-merge($spacers, (auto: auto)) ), "margin-end": ( responsive: true, property: margin-right, class: me, values: map-merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: map-merge($spacers, (auto: auto)) ), "margin-start": ( responsive: true, property: margin-left, class: ms, values: map-merge($spacers, (auto: auto)) ), // Negative margin utilities "negative-margin": ( responsive: true, property: margin, class: m, values: $negative-spacers ), "negative-margin-x": ( responsive: true, property: margin-right margin-left, class: mx, values: $negative-spacers ), "negative-margin-y": ( responsive: true, property: margin-top margin-bottom, class: my, values: $negative-spacers ), "negative-margin-top": ( responsive: true, property: margin-top, class: mt, values: $negative-spacers ), "negative-margin-end": ( responsive: true, property: margin-right, class: me, values: $negative-spacers ), "negative-margin-bottom": ( responsive: true, property: margin-bottom, class: mb, values: $negative-spacers ), "negative-margin-start": ( responsive: true, property: margin-left, class: ms, values: $negative-spacers ), // Padding utilities "padding": ( responsive: true, property: padding, class: p, values: $spacers ), "padding-x": ( responsive: true, property: padding-right padding-left, class: px, values: $spacers ), "padding-y": ( responsive: true, property: padding-top padding-bottom, class: py, values: $spacers ), "padding-top": ( responsive: true, property: padding-top, class: pt, values: $spacers ), "padding-end": ( responsive: true, property: padding-right, class: pe, values: $spacers ), "padding-bottom": ( responsive: true, property: padding-bottom, class: pb, values: $spacers ), "padding-start": ( responsive: true, property: padding-left, class: ps, values: $spacers ), |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |