Bootstrap 4 border utilities

后端 未结 6 2037
夕颜
夕颜 2020-12-15 06:08

I feel like this should be obvious to find but I have not come up with anything. Bootstrap 4 has utility class for adding and removing a border, but is there support for def

6条回答
  •  死守一世寂寞
    2020-12-15 06:36

    Suggests to add a bootstrap extension.

    /* _border-width-customs.scss */
    $border-width-custom-1: 1px !default;
    $border-width-custom-2: 2px !default;
    $border-width-custom-3: 3px !default;
    $border-width-custom-4: 4px !default;
    $border-width-custom-5: 5px !default;
    $border-width-custom-6: 6px !default;
    $border-width-custom-7: 7px !default;
    $border-width-custom-8: 8px !default;
    
    $border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);
    
    @each $name, $size in $border-width-customs {
        @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
            .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
        }
    }
    

提交回复
热议问题