Bootstrap 4 border utilities

问题

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 defining the border width or style like solid or dashed?

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

There are some classes that changes the margins and padding such as mr-3 and pt-2.

Maybe I just need to define them myself?

回答1:

No, there are no classes in Bootstrap 4 for border width or style.

You can simply add something like:

.border-3 {
    border-width:3px !important;
}

https://www.codeply.com/go/ktnEeWExvh

NOTE: !important is needed in this case because Bootstrap also uses !important in many of the utility classes like border-*.

回答2:

In bootstrap 4 for borders you can use only :

Borders - add remove borders
Border color
Border Radius
Float
Responsive Floats
Center Align
Width
Height
Spacing

You can create your own classes, something like :

.border-dotted{
 border-style: dotted;
}
.border-10{
border-style:solid;
 border-width: 10px;
}

<h1 class="border-dotted">Hi</h1>
<h1 class="border-10">Hi!</h1>

回答3:

If you have bootstrap npm library and if you look at _variable.scss you will find $border-width: 1px !default;

You can override it by creating a new scss file where you can import bootstrap modules.

$myborder-width : 3px;

$border-width:$myborder-width;

@import "../node_modules/bootstrap/scss/bootstrap";(you can include only the required modules here)

you can convert this main.scss file to css and use this css instead of bootstrap.css in your html.

回答4:

Please see Bootstrap's Border Documentation.

There are basic styling classes set up (similar to the btn-default, btn-warning) sets and border radius. But any other styling would need to be done yourself.

The reason for this would be that there is either not enough demand for Bootstrap to add this natively into their framework, there are too many options to efficiently define, or how simple it is to write them in your own classes.

回答5:

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;}
    }
}

来源：https://stackoverflow.com/questions/48506610/bootstrap-4-border-utilities

标签

html

css

twitter-bootstrap

bootstrap-4