Question

我觉得这应该是显而易见的，但我没有想出任何东西。 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>

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

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

Answer 1

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

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

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

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

注意：在这种情况下需要!important，因为Bootstrap在许多utility classes border-*中也使用！important。

Answer 2

如果您具有bootstrap npm库，并且查看_variable.scss，则会发现 $ border-width：1px！default;

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

$myborder-width : 3px;

$border-width:$myborder-width;

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

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

Answer 3

在bootstrap V5中，您可以执行此操作

$utilities: (
  "border-width": (
    property: border-width,
    class: border,
    values: (
      1: 1px,
      2: 2px,
      3: 3px,
      4: 4px,
      5: 5px,
    )
  )
)

Answer 4

请参阅Bootstrap's Border Documentation.

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

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

Answer 5

在bootstrap 4中，只能使用：

边框 - 添加删除边框
边框颜色
边界半径
浮
Responsive Floats
中心对齐
宽度
高度
间距

您可以创建自己的类，例如：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

建议添加引导扩展名。

/* _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;}
    }
}

Bootstrap 4边界实用程序

6 个答案: