Html Bootstrap 4 边界实用程序

Bootstrap 4 border utilities

提问by Zim

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?

我觉得这应该很明显，但我没有想出任何东西。Bootstrap 4 具有用于添加和删除边框的实用程序类，但是否支持定义边框宽度或样式（如实线或虚线）？

<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-3and pt-2.

有一些类可以更改边距和填充，例如mr-3和pt-2。

Maybe I just need to define them myself?

也许我只需要自己定义它们？

回答by Zim

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

不，Bootstrap 4 中没有用于边框宽度或样式的类。

You can simply add something like:

您可以简单地添加如下内容：

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

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

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

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

注意：!important在这种情况下需要，因为 Bootstrap 还在许多实用程序类中使用 !important ，例如border-*.

回答by Teshtek

In bootstrap 4 for borders you can use only :

在引导程序 4 中，您只能使用边框：

• 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>

回答by Akash Singh

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

如果你有 bootstrap npm 库，如果你查看 _variable.scss 你会发现 $border-width: 1px !default;

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

您可以通过创建一个新的 scss 文件来覆盖它，您可以在其中导入引导程序模块。

$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.

您可以将此 main.scss 文件转换为 css 并在您的 html 中使用此 css 而不是 bootstrap.css。

回答by CisSasGot

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

回答by David Picksley

Please see Bootstrap's Border Documentation.

请参阅Bootstrap 的边界文档。

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.

有基本的样式类设置（类似于 btn-default、btn-warning）集和边框半径。但是任何其他样式都需要自己完成。

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.

原因可能是 Bootstrap 没有足够的需求将其原生添加到他们的框架中，有太多的选项需要有效定义，或者在您自己的类中编写它们是多么简单。