如何使用JavaScript或jQuery动态修改Bootstrap面包屑的高度

问题核心原因 #

1. 你修改高度的目标是外层nav.currentDirectory容器，但面包屑的实际视觉高度由Bootstrap自带样式的内部.breadcrumb元素控制，其默认的内边距、外边距、行高没有被同步修改，因此父容器高度变化不会产生视觉上的高度改变。
2. 你使用的height: 200%是相对单位，需要所有上层父元素都有明确的高度声明才能正确计算，当前结构下百分比高度会失效，优先使用固定像素值更稳妥。
3. 用attr('style')会覆盖元素所有原有行内样式，不如使用jQuery的css()方法更安全灵活。

解决方案 #

方案1：直接通过JS修改样式

直接选中内部.breadcrumb元素修改相关属性即可生效：

setTimeout(() => {
  $('.currentDirectory .breadcrumb').css({
    'height': '80px', // 可替换为你需要的高度值，确认父级高度明确时也可使用百分比
    'padding': '2rem 1rem', // 调整内边距适配高度
    'margin-bottom': '0' // 清除Bootstrap默认的下外边距
  })
  // 若需要同步修改外层nav容器高度，补充以下代码即可
  // $('.currentDirectory').height('80px')
}, 3000)

方案2：通过CSS类控制（更规范易维护）

先定义自定义样式类：

.breadcrumb-large {
  height: 80px !important;
  padding: 2rem 1rem !important;
  margin-bottom: 0 !important;
}

JS中仅需添加类即可：

setTimeout(() => {
  $('.currentDirectory .breadcrumb').addClass('breadcrumb-large')
}, 3000)

内容的提问来源于stack exchange，提问作者seriously