文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 5导航栏-light和font-style在Edge上不起作用

问Bootstrap 5导航栏-light和font-style在Edge上不起作用
EN

Stack Overflow用户

提问于 2021-10-25 16:51:22

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

我在microsoft edge上的网站有一个问题。它在chrome上运行得很好，但当我试图在边缘导航栏上加载页面时，" navbar -light“和"bg-light”类似乎不起作用，页面字体样式是默认的。我使用bootstrap5和webfonts作为字体。我该如何解决这个问题呢？

这是index.html页面：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <!--<link href="assets/css/all.css" rel="stylesheet">-->
    <title>bootstrap</title>

</head>

<body>
    <nav class="navbar navbar-light bg-light navbar-expand-md">
        <div class="container">
            
           <!-- pro botao hamburg aparecer na esquerda, igual no rede market, eh so botar ele antes da logo-->
           <a class="navbar-brand" href="#"><img src="images/Rio-Turismo.png" width="90px"
                 alt="Rio Turismo"></a>
           
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu" 
                 aria-controls="menu" aria-expanded="false" aria-label="Botão de navegação">
            <span class="navbar-toggler-icon"></span>
         </button>

           <div class="collapse navbar-collapse" id="menu">
              <div class="navbar-nav me-auto">
                 <a class="nav-item nav-link" href="#passeios">Passeios</a>
                 <a class="nav-item nav-link" href="#excursoes">Excursões</a>
                 <a class="nav-item nav-link dropdown-toggle" href="#">Passeios Culturais</a>
                

                 <div class="dropdown-menu">
                     <a class="dropdown-item" href="#">Museus</a>
                     <a class="dropdown-item" href="#">Feiras</a>
                     <a class="dropdown-item" href="#">Bibliotecas</a>
                     <a class="dropdown-item" href="#">Livrarias</a>
                 </div>
  
                 <a class="nav-item nav-link" href="#">Reservas</a>
                 <a class="nav-item nav-link" href="#header">Contato</a>
              </div>

              <div class="d-none d-sm-block">telas small pra cima</div>
              <!--div q n eh mostrada em mobile-->

              <div class="navbar-nav">
                 <a class="nav-item nav-link" href="#pedidos">Meus Pedidos</a>
                 <a class="nav-item nav-link" href="#janelamodal">Entrar</a>
              </div>
           </div>
        </div>
     </nav>

    <img src="images/panoramica1.jpg">

    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/script.js"></script>
</body>


</html>

html

css

twitter-bootstrap

microsoft-edge

bootstrap-5

回答 1

Stack Overflow用户

发布于 2021-10-26 08:35:07

您在页面中导入的js和css文件是否正确？

我用你提供的代码做了一个简单的测试，它在Chrome版本的95.0.4638.54和边缘版本的95.0.1020.30上显示了同样的效果。这三个资源文件是：

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

结果是：

如果可能，您能否提供更多详细信息，以便我们可以重现此问题？这将有助于解决问题，感谢您的理解。

票数 0

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

原文链接：

https://stackoverflow.com/questions/69711927

复制

相似问题

问Bootstrap 5导航栏-light和font-style在Edge上不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 5导航栏-light和font-style在Edge上不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 5导航栏-light和font-style在Edge上不起作用
EN