AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 78524476
Accepted
klewis
klewis
Asked: 2024-05-24 00:30:25 +0800 CST2024-05-24 00:30:25 +0800 CST 2024-05-24 00:30:25 +0800 CST

Bootstrap 5.3 扩展选项用于底部边框尺寸调整

  • 772
根据官方Bootstrap指南中展示的示例,使用边框类时调整边框宽度大小似乎很容易... ```html ``` 但如果我们只想使用底部边框,例如... ```html ``` 我们如何利用这些相同的尺寸选项呢? 我能在我的自定义.scss文件中写些什么来扩展utilities.scss文件(node_modules/bootstrap/scss/mixins/_utilities.scss),以允许底部边框有不同的边框大小吗? 我尝试了 ```css $utilities: map-merge( $utilities, ( "border-width": ( property: border-width, class: border, values: $border-widths ) ) ); ``` 和 ```css $utilities: map-merge($utilities, ("border-width": map-merge(map-get($utilities, "border-width"), (values: ( 1: 1px, 2: 2px, 3: 3px, 4: 4px, 5: 5px, ), )))); ``` 但当与`border-bottom`一起使用时,没有效果。 但即使我找到了解决方案...在utilities.scss文件中的以下Bootstrap规则有一个重要的语句应用到它的规则上... ![enter image description here](https://isstatic.askoverflow.dev/FFkkN8Vo.png) 有没有办法解决这个问题? 我能想到的唯一办法是如果我们设置一个switch case(SASS map)或多个if else语句过程来改变`--bs-border-width`的值,这取决于类的名称...?我完全不知道。
sass
  • 1 1 个回答
  • 33 Views

1 个回答

  • Voted
  1. Best Answer
    MrUpsidown
    2024-05-24T04:11:33+08:002024-05-24T04:11:33+08:00

    border-bottom border-5 在我这边运行良好。我建议你的 CSS 中可能有某些内容覆盖了这些类名 / 应用了不同的边框宽度到你尝试样式化的元素上。

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
    <div class="container mt-2">
      <h2 class="border-bottom border-1 border-secondary p-2">底部边框 1</h2>
      <h2 class="border-bottom border-2 border-danger p-2">底部边框 2</h2>
      <h2 class="border-bottom border-3 border-success p-2">底部边框 3</h2>
      <h2 class="border-bottom border-4 border-primary p-2">底部边框 4</h2>
      <h2 class="border-bottom border-5 border-warning p-2">底部边框 5</h2>
    </div>

    • 2

相关问题

  • 使用scss时如何覆盖antd样式变量?

  • scss 代码忽略 & 运算符的第一个子级

  • 如何在 SASS 中循环嵌套映射

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    Vue 3:创建时出错“预期标识符但发现‘导入’”[重复]

    • 1 个回答
  • Marko Smith

    为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍,但在任何 Oracle JVM 上却不行?

    • 1 个回答
  • Marko Smith

    具有指定基础类型但没有枚举器的“枚举类”的用途是什么?

    • 1 个回答
  • Marko Smith

    如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误?

    • 6 个回答
  • Marko Smith

    `(表达式,左值) = 右值` 在 C 或 C++ 中是有效的赋值吗?为什么有些编译器会接受/拒绝它?

    • 3 个回答
  • Marko Smith

    何时应使用 std::inplace_vector 而不是 std::vector?

    • 3 个回答
  • Marko Smith

    在 C++ 中,一个不执行任何操作的空程序需要 204KB 的堆,但在 C 中则不需要

    • 1 个回答
  • Marko Smith

    PowerBI 目前与 BigQuery 不兼容:Simba 驱动程序与 Windows 更新有关

    • 2 个回答
  • Marko Smith

    AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String”

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Martin Hope
    Aleksandr Dubinsky 为什么 InetAddress 上的 switch 模式匹配会失败,并出现“未涵盖所有可能的输入值”? 2024-12-23 06:56:21 +0800 CST
  • Martin Hope
    Phillip Borge 为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍,但在任何 Oracle JVM 上却不行? 2024-12-12 20:46:46 +0800 CST
  • Martin Hope
    Oodini 具有指定基础类型但没有枚举器的“枚举类”的用途是什么? 2024-12-12 06:27:11 +0800 CST
  • Martin Hope
    sleeptightAnsiC `(表达式,左值) = 右值` 在 C 或 C++ 中是有效的赋值吗?为什么有些编译器会接受/拒绝它? 2024-11-09 07:18:53 +0800 CST
  • Martin Hope
    The Mad Gamer 何时应使用 std::inplace_vector 而不是 std::vector? 2024-10-29 23:01:00 +0800 CST
  • Martin Hope
    Chad Feller 在 5.2 版中,bash 条件语句中的 [[ .. ]] 中的分号现在是可选的吗? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench 为什么双破折号 (--) 会导致此 MariaDB 子句评估为 true? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng 为什么 `dict(id=1, **{'id': 2})` 有时会引发 `KeyError: 'id'` 而不是 TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob:MobileAds.initialize() - 对于某些设备,“java.lang.Integer 无法转换为 java.lang.String” 2024-03-20 03:12:31 +0800 CST
  • Martin Hope
    MarkB 为什么 GCC 生成有条件执行 SIMD 实现的代码? 2024-02-17 06:17:14 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve