文章/答案/技术大牛

发布

社区首页 >问答首页 >无法覆盖引导主题

问无法覆盖引导主题
EN

Stack Overflow用户

提问于 2022-01-14 16:28:08

回答 1查看 154关注 0票数 0

我已经尝试过几种方法来覆盖这个段落元素P.fs-5.text-muted的Bootstrap的CSS，但是除了这个，所有其他的CSS都很容易改变。

例如，此代码工作如下：

H1.display-4.fw-normal {
  font-size: 25px;
}

但我不知道为什么这个代码不起作用：

P.fs-5.text-muted {
  color: #00f;
  font-size: 10px;
}

我尝试过添加一个custom.css文件，并在引导链接之后将其链接到主HTML，但仍然没有得到任何结果。

以下是页面的完整代码：

<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="" />
      <meta
         name="author"
         content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
         />
      <meta name="generator" content="Hugo 0.88.1" />
      <title>Pricing example · Bootstrap v5.1</title>
      <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
         rel="stylesheet"
         />
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
      <!-- Custom styles for this template -->
      <script src="new.js"></script>
      <style id="style">
         P.fs-5.text-muted {
         color: #00f;
         font-size: 10px;
         }
         H1.display-4.fw-normal {
         font-size: 25px;
         }
      </style>
   </head>
   <body
      data-new-gr-c-s-check-loaded="14.1044.0"
      data-gr-ext-installed=""
      style="overflow-x: hidden"
      >
      <div class="container py-3">
      <header>
         <div
            class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"
            >
            <a
               href="/"
               class="d-flex align-items-center text-dark text-decoration-none"
               >
            <span class="fs-4">Pricing example</span>
            </a>
            <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Features</a
                  >
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Enterprise</a
                  >
               <a class="me-3 py-2 text-dark text-decoration-none" href="#"
                  >Support</a
                  >
               <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
            </nav>
         </div>
         <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
            <h1 class="display-4 fw-normal">Pricing</h1>
            <p class="fs-5 text-muted">
               Quickly build an effective pricing table for your potential
               customers with this Bootstrap example. It’s built with default
               Bootstrap components and utilities with little customization.
            </p>
         </div>
      </header>
   </body>
</html>

为什么该段没有更新？我不想用Sass做这个用途。有什么解决办法吗？

html

css

bootstrap-5

回答 1

Stack Overflow用户

发布于 2022-01-14 16:34:56

您可以使用!important。

例如：

.class{
    font-size: 10px!important;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70713657

复制

相似问题

问无法覆盖引导主题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法覆盖引导主题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法覆盖引导主题
EN