Bootstrap 自定义引导css属性被标准属性覆盖

cig3rfwq 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(170)

自从bootstrap 4. 6更新到5. 2以来，我的下拉按钮有问题。
我在我下面的CSS中使用了这个标题：

.top-bar-nav-btn.btn {
      line-height: normal;
      display: block;
      border-radius: 0;
      border: 0;
    }

和相同的元素，我使用它的页脚和覆盖的css：

.footer-columns .footer-column .footer-column-content-inner .top-bar-nav-item  .top-bar-nav-btn.btn {
          font-weight: $font-weight-semibold;
          width: 100%;
          @include button-variant($light, $light);
          @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
        }

实际上这在4.6上是有效的，但是现在用css自定义前缀它被覆盖了-请检查文件
enter image description here
在这里，它需要填充：0，而不是覆盖css从页脚列。
我错过了什么？

twitter-bootstrap

来源：https://stackoverflow.com/questions/76440131/custom-bootstrap-css-property-is-getting-overwritten-by-standard-property

1条答案

按热度按时间

ljsrvy3e1#

根据所提供的CSS代码，您似乎已经为.top-bar-nav-btn.btn类定义了两种不同的样式。一种样式在页眉中定义，另一种样式在页脚中定义。
若要确保页脚样式覆盖页眉样式，可以增加页脚样式的专用性。目前，选择器.footer-columns .footer-column .footer-column-content-inner .top-bar-nav-item .top-bar-nav-btn.btn具有比.top-bar-nav-btn.btn更高的特异性。但是，随着Bootstrap 5中自定义前缀的引入，您需要相应地更新选择器。
请确保您的CSS文件在Bootstrap CSS文件之后加载，以便您的样式覆盖Bootstrap样式。此外，修改页脚选择器以使用适当的Bootstrap自定义前缀。假设自定义前缀是.your-custom-prefix，您可以按如下方式更新选择器：

.your-custom-prefix .footer-columns .footer-column .footer-column-content-inner .top-bar-nav-item .top-bar-nav-btn.btn {
  font-weight: $font-weight-semibold;
  width: 100%;
  @include button-variant($light, $light);
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
}

确保将.your-custom-prefix替换为您正在使用的实际自定义前缀。
通过增加页脚选择器的特异性并使用适当的自定义前缀，您的样式应该正确覆盖Bootstrap样式。

赞(0）回复(0）举报 2023-06-20

我来回答

Bootstrap 自定义引导css属性被标准属性覆盖

1条答案

相关问题

热门标签

最新问答