Bootstrap 响应边距和填充 Less/CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31571924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 11:22:36 来源:igfitidea点击:
Bootstrap Responsive Margins & Padding Less/CSS
提问by Faultymedia
I've created a series of CSS classes to easily manipulate the margins and padding of various elements. I've also utilized media queries to create responsive classes that only apply at certain screen widths. Everything appears to work as it should, but as you can see, my Less writing skills are extremely lacking and the code is huge!
我创建了一系列 CSS 类来轻松操作各种元素的边距和填充。我还利用媒体查询来创建仅适用于特定屏幕宽度的响应类。一切似乎都按预期工作，但正如您所看到的，我的 Less 写作技巧非常缺乏，代码非常庞大！
I know far less code could be used to output the required CSS, but all of my attempts to write the custom mixin's and loops have come up short.
我知道可用于输出所需 CSS 的代码要少得多，但我编写自定义 mixin 和循环的所有尝试都失败了。
Is it possible to reduce this block of code to something a little slicker? Any help would be appreciated.
是否有可能将这段代码减少到更简洁的程度？任何帮助，将不胜感激。
Cheers!
干杯!
// Margins and padding
// -------------------------
// Horizontal and vertical offset values
@x-0: 0;
@x-xs: (@grid-gutter-width / 4);
@x-sm: (@grid-gutter-width / 2);
@x-md: @grid-gutter-width;
@x-lg: (@grid-gutter-width * 2);
@x-xl: (@grid-gutter-width * 4);
@y-0: 0;
@y-xs: (@line-height-computed / 4);
@y-sm: (@line-height-computed / 2);
@y-md: @line-height-computed;
@y-lg: (@line-height-computed * 2);
@y-xl: (@line-height-computed * 4);
// Static margins
.mt-0 { margin-top: @y-0; }
.mt-xs { margin-top: @y-xs; }
.mt-sm { margin-top: @y-sm; }
.mt-md { margin-top: @y-md; }
.mt-lg { margin-top: @y-lg; }
.mt-xl { margin-top: @y-xl; }
.mr-0 { margin-right: @x-0; }
.mr-xs { margin-right: @x-xs; }
.mr-sm { margin-right: @x-sm; }
.mr-md { margin-right: @x-md; }
.mr-lg { margin-right: @x-lg; }
.mr-xl { margin-right: @x-xl; }
.mb-0 { margin-bottom: @y-0; }
.mb-xs { margin-bottom: @y-xs; }
.mb-sm { margin-bottom: @y-sm; }
.mb-md { margin-bottom: @y-md; }
.mb-lg { margin-bottom: @y-lg; }
.mb-xl { margin-bottom: @y-xl; }
.ml-0 { margin-left: @x-0; }
.ml-xs { margin-left: @x-xs; }
.ml-sm { margin-left: @x-sm; }
.ml-md { margin-left: @x-md; }
.ml-lg { margin-left: @x-lg; }
.ml-xl { margin-left: @x-xl; }
// Responsive margins
@media (max-width: @screen-xs-max) {
.mt-0-sm { margin-top: @y-0; }
.mt-xs-sm { margin-top: @y-xs; }
.mt-sm-sm { margin-top: @y-sm; }
.mt-md-sm { margin-top: @y-md; }
.mt-lg-sm { margin-top: @y-lg; }
.mt-xl-sm { margin-top: @y-xl; }
.mr-0-sm { margin-right: @x-0; }
.mr-xs-sm { margin-right: @x-xs; }
.mr-sm-sm { margin-right: @x-sm; }
.mr-md-sm { margin-right: @x-md; }
.mr-lg-sm { margin-right: @x-lg; }
.mr-xl-sm { margin-right: @x-xl; }
.mb-0-sm { margin-bottom: @y-0; }
.mb-xs-sm { margin-bottom: @y-xs; }
.mb-sm-sm { margin-bottom: @y-sm; }
.mb-md-sm { margin-bottom: @y-md; }
.mb-lg-sm { margin-bottom: @y-lg; }
.mb-xl-sm { margin-bottom: @y-xl; }
.ml-0-sm { margin-left: @x-0; }
.ml-xs-sm { margin-left: @x-xs; }
.ml-sm-sm { margin-left: @x-sm; }
.ml-md-sm { margin-left: @x-md; }
.ml-lg-sm { margin-left: @x-lg; }
.ml-xl-sm { margin-left: @x-xl; }
}
@media (max-width: @screen-sm-max) {
.mt-0-md { margin-top: @y-0; }
.mt-xs-md { margin-top: @y-xs; }
.mt-sm-md { margin-top: @y-sm; }
.mt-md-md { margin-top: @y-md; }
.mt-lg-md { margin-top: @y-lg; }
.mt-xl-md { margin-top: @y-xl; }
.mr-0-md { margin-right: @x-0; }
.mr-xs-md { margin-right: @x-xs; }
.mr-sm-md { margin-right: @x-sm; }
.mr-md-md { margin-right: @x-md; }
.mr-lg-md { margin-right: @x-lg; }
.mr-xl-md { margin-right: @x-xl; }
.mb-0-md { margin-bottom: @y-0; }
.mb-xs-md { margin-bottom: @y-xs; }
.mb-sm-md { margin-bottom: @y-sm; }
.mb-md-md { margin-bottom: @y-md; }
.mb-lg-md { margin-bottom: @y-lg; }
.mb-xl-md { margin-bottom: @y-xl; }
.ml-0-md { margin-left: @x-0; }
.ml-xs-md { margin-left: @x-xs; }
.ml-sm-md { margin-left: @x-sm; }
.ml-md-md { margin-left: @x-md; }
.ml-lg-md { margin-left: @x-lg; }
.ml-xl-md { margin-left: @x-xl; }
}
@media (max-width: @screen-md-max) {
.mt-0-lg { margin-top: @y-0; }
.mt-xs-lg { margin-top: @y-xs; }
.mt-sm-lg { margin-top: @y-sm; }
.mt-md-lg { margin-top: @y-md; }
.mt-lg-lg { margin-top: @y-lg; }
.mt-xl-lg { margin-top: @y-xl; }
.mr-0-lg { margin-right: @x-0; }
.mr-xs-lg { margin-right: @x-xs; }
.mr-sm-lg { margin-right: @x-sm; }
.mr-md-lg { margin-right: @x-md; }
.mr-lg-lg { margin-right: @x-lg; }
.mr-xl-lg { margin-right: @x-xl; }
.mb-0-lg { margin-bottom: @y-0; }
.mb-xs-lg { margin-bottom: @y-xs; }
.mb-sm-lg { margin-bottom: @y-sm; }
.mb-md-lg { margin-bottom: @y-md; }
.mb-lg-lg { margin-bottom: @y-lg; }
.mb-xl-lg { margin-bottom: @y-xl; }
.ml-0-lg { margin-left: @x-0; }
.ml-xs-lg { margin-left: @x-xs; }
.ml-sm-lg { margin-left: @x-sm; }
.ml-md-lg { margin-left: @x-md; }
.ml-lg-lg { margin-left: @x-lg; }
.ml-xl-lg { margin-left: @x-xl; }
}
// Static padding
.pt-0 { padding-top: @y-0; }
.pt-xs { padding-top: @y-xs; }
.pt-sm { padding-top: @y-sm; }
.pt-md { padding-top: @y-md; }
.pt-lg { padding-top: @y-lg; }
.pt-xl { padding-top: @y-xl; }
.pr-0 { padding-right: @x-0; }
.pr-xs { padding-right: @x-xs; }
.pr-sm { padding-right: @x-sm; }
.pr-md { padding-right: @x-md; }
.pr-lg { padding-right: @x-lg; }
.pr-xl { padding-right: @x-xl; }
.pb-0 { padding-bottom: @y-0; }
.pb-xs { padding-bottom: @y-xs; }
.pb-sm { padding-bottom: @y-sm; }
.pb-md { padding-bottom: @y-md; }
.pb-lg { padding-bottom: @y-lg; }
.pb-xl { padding-bottom: @y-xl; }
.pl-0 { padding-left: @x-0; }
.pl-xs { padding-left: @x-xs; }
.pl-sm { padding-left: @x-sm; }
.pl-md { padding-left: @x-md; }
.pl-lg { padding-left: @x-lg; }
.pl-xl { padding-left: @x-xl; }
// Responsive padding
@media (max-width: @screen-xs-max) {
.pt-0-sm { padding-top: @y-0; }
.pt-xs-sm { padding-top: @y-xs; }
.pt-sm-sm { padding-top: @y-sm; }
.pt-md-sm { padding-top: @y-md; }
.pt-lg-sm { padding-top: @y-lg; }
.pt-xl-sm { padding-top: @y-xl; }
.pr-0-sm { padding-right: @x-0; }
.pr-xs-sm { padding-right: @x-xs; }
.pr-sm-sm { padding-right: @x-sm; }
.pr-md-sm { padding-right: @x-md; }
.pr-lg-sm { padding-right: @x-lg; }
.pr-xl-sm { padding-right: @x-xl; }
.pb-0-sm { padding-bottom: @y-0; }
.pb-xs-sm { padding-bottom: @y-xs; }
.pb-sm-sm { padding-bottom: @y-sm; }
.pb-md-sm { padding-bottom: @y-md; }
.pb-lg-sm { padding-bottom: @y-lg; }
.pb-xl-sm { padding-bottom: @y-xl; }
.pl-0-sm { padding-left: @x-0; }
.pl-xs-sm { padding-left: @x-xs; }
.pl-sm-sm { padding-left: @x-sm; }
.pl-md-sm { padding-left: @x-md; }
.pl-lg-sm { padding-left: @x-lg; }
.pl-xl-sm { padding-left: @x-xl; }
}
@media (max-width: @screen-sm-max) {
.pt-0-md { padding-top: @y-0; }
.pt-xs-md { padding-top: @y-xs; }
.pt-sm-md { padding-top: @y-sm; }
.pt-md-md { padding-top: @y-md; }
.pt-lg-md { padding-top: @y-lg; }
.pt-xl-md { padding-top: @y-xl; }
.pr-0-md { padding-right: @x-0; }
.pr-xs-md { padding-right: @x-xs; }
.pr-sm-md { padding-right: @x-sm; }
.pr-md-md { padding-right: @x-md; }
.pr-lg-md { padding-right: @x-lg; }
.pr-xl-md { padding-right: @x-xl; }
.pb-0-md { padding-bottom: @y-0; }
.pb-xs-md { padding-bottom: @y-xs; }
.pb-sm-md { padding-bottom: @y-sm; }
.pb-md-md { padding-bottom: @y-md; }
.pb-lg-md { padding-bottom: @y-lg; }
.pb-xl-md { padding-bottom: @y-xl; }
.pl-0-md { padding-left: @x-0; }
.pl-xs-md { padding-left: @x-xs; }
.pl-sm-md { padding-left: @x-sm; }
.pl-md-md { padding-left: @x-md; }
.pl-lg-md { padding-left: @x-lg; }
.pl-xl-md { padding-left: @x-xl; }
}
@media (max-width: @screen-md-max) {
.pt-0-lg { padding-top: @y-0; }
.pt-xs-lg { padding-top: @y-xs; }
.pt-sm-lg { padding-top: @y-sm; }
.pt-md-lg { padding-top: @y-md; }
.pt-lg-lg { padding-top: @y-lg; }
.pt-xl-lg { padding-top: @y-xl; }
.pr-0-lg { padding-right: @x-0; }
.pr-xs-lg { padding-right: @x-xs; }
.pr-sm-lg { padding-right: @x-sm; }
.pr-md-lg { padding-right: @x-md; }
.pr-lg-lg { padding-right: @x-lg; }
.pr-xl-lg { padding-right: @x-xl; }
.pb-0-lg { padding-bottom: @y-0; }
.pb-xs-lg { padding-bottom: @y-xs; }
.pb-sm-lg { padding-bottom: @y-sm; }
.pb-md-lg { padding-bottom: @y-md; }
.pb-lg-lg { padding-bottom: @y-lg; }
.pb-xl-lg { padding-bottom: @y-xl; }
.pl-0-lg { padding-left: @x-0; }
.pl-xs-lg { padding-left: @x-xs; }
.pl-sm-lg { padding-left: @x-sm; }
.pl-md-lg { padding-left: @x-md; }
.pl-lg-lg { padding-left: @x-lg; }
.pl-xl-lg { padding-left: @x-xl; }
}
采纳答案by Faultymedia
Many thanks to Bass Jobsen for doing the majority of the legwork here! For those of you who may be interested, here is the final version I'm using now:
非常感谢 Bass Jobsen 在这里完成了大部分的跑腿工作！对于那些可能感兴趣的人，这是我现在使用的最终版本：
@grid-gutter-width: 16px;
@line-height-computed: 16px;
@screen-xs-max: 767px;
@screen-sm-max: 991px;
@screen-md-max: 1199px;
// Horizontal and vertical offsets
@x-0: 0;
@x-xs: (@grid-gutter-width / 4); // 4px
@x-sm: (@grid-gutter-width / 2); // 8px
@x-md: @grid-gutter-width; // 16px
@x-lg: (@grid-gutter-width * 2); // 32px
@x-xl: (@grid-gutter-width * 4); // 64px
@y-0: 0;
@y-xs: (@line-height-computed / 4); // 4px
@y-sm: (@line-height-computed / 2); // 8px
@y-md: @line-height-computed; // 16px
@y-lg: (@line-height-computed * 2); // 32px
@y-xl: (@line-height-computed * 4); // 64px
@positions: t top, r right, b bottom, l left;
@sizes: 0, xs, sm, md, lg, xl;
.axis(@i) when (mod(@i, 2) = 0) {
@axis: x;
}
.axis(@i) when (default()) {
@axis: y;
}
.prop(@property) when (@property = margin) {
@prop: m;
}
.prop(@property) when (@property = padding) {
@prop: p;
}
.rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position, @i: 1) when (@i <= length(@sizes)) {
@size: extract(@sizes, @i);
@offset: ~"@{axis}-@{size}";
.@{prop}@{pos}-@{size}@{postfix} {
@{property}-@{position}: @@offset;
}
.rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position, (@i + 1));
}
.ruleset(@positions, @property, @postfix: ~"", @i: 1) when (@i <= length(@positions)) {
@pos: extract(extract(@positions, @i), 1);
@position: extract(extract(@positions, @i), 2);
.axis(@i);
.prop(@property);
.rules(@prop, @pos, @sizes, @axis, @postfix, @property, @position);
.ruleset(@positions, @property, @postfix, (@i + 1));
}
// Margin & padding modifiers
.ruleset(@positions, margin);
.ruleset(@positions, padding);
// Responsive margin & padding modifiers
@media (max-width: @screen-xs-max) {
.ruleset(@positions, margin, -sm);
.ruleset(@positions, padding, -sm);
}
@media (max-width: @screen-sm-max) {
.ruleset(@positions, margin, -md);
.ruleset(@positions, padding, -md);
}
@media (max-width: @screen-md-max) {
.ruleset(@positions, margin, -lg);
.ruleset(@positions, padding, -lg);
}
回答by Bass Jobsen
try:
尝试：
@grid-gutter-width: 20px;
@line-height-computed: 40px;
// Margins and padding
// -------------------------
// Horizontal and vertical offset values
@x-0: 0;
@x-xs: (@grid-gutter-width / 4);
@x-sm: (@grid-gutter-width / 2);
@x-md: @grid-gutter-width;
@x-lg: (@grid-gutter-width * 2);
@x-xl: (@grid-gutter-width * 4);
@y-0: 0;
@y-xs: (@line-height-computed / 4);
@y-sm: (@line-height-computed / 2);
@y-md: @line-height-computed;
@y-lg: (@line-height-computed * 2);
@y-xl: (@line-height-computed * 4);
@positions: t top, r right, b bottom, l left;
@grids: 0, xs, md, lg, xl;
.what(@i) when (mod(@i, 2) = 0) {
@what: x;
}
.what(@i) when (default()) {
@what: y;
}
.properties(@prefix, @postfix, @whitespace, @what, @position, @grids, @i: 1) when (@i <= length(@grids)) {
@grid: extract(@grids,@i);
.m@{prefix}-@{grid}@{postfix} {
@var: ~"@{what}-@{grid}";
@{whitespace}-@{position}: @@var;
}
.properties(@prefix, @postfix, @whitespace, @what, @position, @grids, (@i + 1));
}
.whitespace(@positions, @whitespace: margin, @postfix: ~"", @i: 1) when (@i <= length(@positions)) {
@class: extract(extract(@positions, @i), 1);
@position: extract(extract(@positions, @i), 2);
.what(@i);
.properties(@class, @postfix, @whitespace, @what, @position, @grids);
.whitespace(@positions, @whitespace, @postfix, (@i + 1));
}
.whitespace(@positions);
.whitespace(@positions, padding);
@screen-xs-max: 767px;
@screen-sm-max: 767px;
// Responsive
@media (max-width: @screen-xs-max) {
.whitespace(@positions, margin, -sm);
.whitespace(@positions, padding, -sm);
}
@media (max-width: @screen-sm-max) {
.whitespace(@positions, margin, -md);
.whitespace(@positions, padding, -md);
}
The above compiles into the CSS code like that shown beneath:
上面的代码编译成如下所示的 CSS 代码：
.mt-0 {
margin-top: 0;
}
.mt-xs {
margin-top: 10px;
}
.mt-md {
margin-top: 40px;
}
.mt-lg {
margin-top: 80px;
}
.mt-xl {
margin-top: 160px;
}
.mr-0 {
margin-right: 0;
}
.mr-xs {
margin-right: 5px;
}
.mr-md {
margin-right: 20px;
}
.mr-lg {
margin-right: 40px;
}
.mr-xl {
margin-right: 80px;
}
.mb-0 {
margin-bottom: 0;
}
.mb-xs {
margin-bottom: 10px;
}
.mb-md {
margin-bottom: 40px;
}
.mb-lg {
margin-bottom: 80px;
}
.mb-xl {
margin-bottom: 160px;
}
.ml-0 {
margin-left: 0;
}
.ml-xs {
margin-left: 5px;
}
.ml-md {
margin-left: 20px;
}
.ml-lg {
margin-left: 40px;
}
.ml-xl {
margin-left: 80px;
}
.mt-0 {
padding-top: 0;
}
.mt-xs {
padding-top: 10px;
}
.mt-md {
padding-top: 40px;
}
.mt-lg {
padding-top: 80px;
}
.mt-xl {
padding-top: 160px;
}
.mr-0 {
padding-right: 0;
}
.mr-xs {
padding-right: 5px;
}
.mr-md {
padding-right: 20px;
}
.mr-lg {
padding-right: 40px;
}
.mr-xl {
padding-right: 80px;
}
.mb-0 {
padding-bottom: 0;
}
.mb-xs {
padding-bottom: 10px;
}
.mb-md {
padding-bottom: 40px;
}
.mb-lg {
padding-bottom: 80px;
}
.mb-xl {
padding-bottom: 160px;
}
.ml-0 {
padding-left: 0;
}
.ml-xs {
padding-left: 5px;
}
.ml-md {
padding-left: 20px;
}
.ml-lg {
padding-left: 40px;
}
.ml-xl {
padding-left: 80px;
}
@media (max-width: 767px) {
.mt-0-sm {
margin-top: 0;
}
.mt-xs-sm {
margin-top: 10px;
}
.mt-md-sm {
margin-top: 40px;
}
.mt-lg-sm {
margin-top: 80px;
}
.mt-xl-sm {
margin-top: 160px;
}
.mr-0-sm {
margin-right: 0;
}
.mr-xs-sm {
margin-right: 5px;
}
.mr-md-sm {
margin-right: 20px;
}
.mr-lg-sm {
margin-right: 40px;
}
.mr-xl-sm {
margin-right: 80px;
}
.mb-0-sm {
margin-bottom: 0;
}
.mb-xs-sm {
margin-bottom: 10px;
}
.mb-md-sm {
margin-bottom: 40px;
}
.mb-lg-sm {
margin-bottom: 80px;
}
.mb-xl-sm {
margin-bottom: 160px;
}
.ml-0-sm {
margin-left: 0;
}
.ml-xs-sm {
margin-left: 5px;
}
.ml-md-sm {
margin-left: 20px;
}
.ml-lg-sm {
margin-left: 40px;
}
.ml-xl-sm {
margin-left: 80px;
}
.mt-0-sm {
padding-top: 0;
}
.mt-xs-sm {
padding-top: 10px;
}
.mt-md-sm {
padding-top: 40px;
}
.mt-lg-sm {
padding-top: 80px;
}
.mt-xl-sm {
padding-top: 160px;
}
.mr-0-sm {
padding-right: 0;
}
.mr-xs-sm {
padding-right: 5px;
}
.mr-md-sm {
padding-right: 20px;
}
.mr-lg-sm {
padding-right: 40px;
}
.mr-xl-sm {
padding-right: 80px;
}
.mb-0-sm {
padding-bottom: 0;
}
.mb-xs-sm {
padding-bottom: 10px;
}
.mb-md-sm {
padding-bottom: 40px;
}
.mb-lg-sm {
padding-bottom: 80px;
}
.mb-xl-sm {
padding-bottom: 160px;
}
.ml-0-sm {
padding-left: 0;
}
.ml-xs-sm {
padding-left: 5px;
}
.ml-md-sm {
padding-left: 20px;
}
.ml-lg-sm {
padding-left: 40px;
}
.ml-xl-sm {
padding-left: 80px;
}
}
@media (max-width: 767px) {
.mt-0-md {
margin-top: 0;
}
.mt-xs-md {
margin-top: 10px;
}
.mt-md-md {
margin-top: 40px;
}
.mt-lg-md {
margin-top: 80px;
}
.mt-xl-md {
margin-top: 160px;
}
.mr-0-md {
margin-right: 0;
}
.mr-xs-md {
margin-right: 5px;
}
.mr-md-md {
margin-right: 20px;
}
.mr-lg-md {
margin-right: 40px;
}
.mr-xl-md {
margin-right: 80px;
}
.mb-0-md {
margin-bottom: 0;
}
.mb-xs-md {
margin-bottom: 10px;
}
.mb-md-md {
margin-bottom: 40px;
}
.mb-lg-md {
margin-bottom: 80px;
}
.mb-xl-md {
margin-bottom: 160px;
}
.ml-0-md {
margin-left: 0;
}
.ml-xs-md {
margin-left: 5px;
}
.ml-md-md {
margin-left: 20px;
}
.ml-lg-md {
margin-left: 40px;
}
.ml-xl-md {
margin-left: 80px;
}
.mt-0-md {
padding-top: 0;
}
.mt-xs-md {
padding-top: 10px;
}
.mt-md-md {
padding-top: 40px;
}
.mt-lg-md {
padding-top: 80px;
}
.mt-xl-md {
padding-top: 160px;
}
.mr-0-md {
padding-right: 0;
}
.mr-xs-md {
padding-right: 5px;
}
.mr-md-md {
padding-right: 20px;
}
.mr-lg-md {
padding-right: 40px;
}
.mr-xl-md {
padding-right: 80px;
}
.mb-0-md {
padding-bottom: 0;
}
.mb-xs-md {
padding-bottom: 10px;
}
.mb-md-md {
padding-bottom: 40px;
}
.mb-lg-md {
padding-bottom: 80px;
}
.mb-xl-md {
padding-bottom: 160px;
}
.ml-0-md {
padding-left: 0;
}
.ml-xs-md {
padding-left: 5px;
}
.ml-md-md {
padding-left: 20px;
}
.ml-lg-md {
padding-left: 40px;
}
.ml-xl-md {
padding-left: 80px;
}
}
回答by Anh Nguyen
The feature is available in Bootstrap 4 now.
该功能现在在 Bootstrap 4 中可用。
