代码之家  ›  专栏  ›  技术社区  ›  Welshy1235

在移动模式下引导导航栏不工作

bootstrap-5 css html
  •  0
  • Welshy1235  · 技术社区  · 3 年前

    我对BOOTSTRAP 5(一般来说是Web开发)很陌生,目前我正试图用它制作一个简单的网站。我选择了一个导航栏,但每当我将浏览器更改为移动模式时,出现的下拉菜单根本不起作用,导航栏中的所有元素都会消失。任何帮助都是伟大的! 

    <!DOCTYPE html>
    <html>
        <head>
            <title>Hello World!</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

            <style type="text/css">
                #jumbotron{
                    background-image: url(bg1.jpg);
                    height: 25rem;
                }

                .center {
                  text-align: center;
                }

                #cardDeck{
                  margin-left: 1rem;
                }

                #logo-space{
                  background-color: blue;
                  width: auto;
                  height: auto;
                }

                #logo{
                  width: 300px;
                  height: 120px;
                  padding: 15px;
                  margin-left: 5rem;
                }
                
                #FMS-BTN{
                    width: 12rem;
                    position: relative;
                    top: 3rem;
                    left: 5rem;
                }
            </style>
        </head>
        
        <body>
            <div id="logo-space" class="row">
              <div class="col">
                <img id="logo" src="img/logo.png" alt="">
              </div>
              <div class="col">
              </div>
              <div class="col">
                <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
                  <img src="" alt="">Head to FMS</a>
              </div>
            </div>
          
            <div id="nav-area">
              <div class="row">
                <div class="col">

                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                      
                      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

                      <div class="collapse navbar-collapse" id="navbarText">

                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                          <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">HOME</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">ABOUT US</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">DIVISIONS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">APPEALS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">FEED</a>
                          </li>
                        </ul>

                        <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
                      </div>
                    </div>
                  </nav>

                </div>
              </div>
            </div>
        </body>   
    </html>
    2 回复  |  直到 3 年前
        1
  •  0
  •   tacoshy    3 年前

    您还需要链接JavaScript包以进行引导。移动菜单仅适用于JS。

    JS包代码是: 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

    您所要做的就是添加JS依赖项以使其工作: 

    <!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <style type="text/css">
    #jumbotron {
      background-image: url(bg1.jpg);
      height: 25rem;
    }
    
    .center {
      text-align: center;
    }
    
    #cardDeck {
      margin-left: 1rem;
    }
    
    #logo-space {
      background-color: blue;
      width: auto;
      height: auto;
    }
    
    #logo {
      width: 300px;
      height: 120px;
      padding: 15px;
      margin-left: 5rem;
    }
    
    #FMS-BTN {
      width: 12rem;
      position: relative;
      top: 3rem;
      left: 5rem;
    }
  </style>
</head>

<body>
  <div id="logo-space" class="row">
    <div class="col">
      <img id="logo" src="img/logo.png" alt="">
    </div>
    <div class="col">
    </div>
    <div class="col">
      <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
        <img src="" alt="">Head to FMS</a>
    </div>
  </div>

  <div id="nav-area">
    <div class="row">
      <div class="col">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

            <div class="collapse navbar-collapse" id="navbarText">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DIVISIONS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">APPEALS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">FEED</a>
                </li>
              </ul>

              <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
            </div>
          </div>
        </nav>

      </div>
    </div>
  </div>
</body>

</html>
        2
  •  -1
  •   Pratyush    3 年前

    您可以使用CSS媒体查询来根据屏幕大小确定要执行的操作。在这里,您需要根据屏幕大小更改导航栏的大小。 

    @media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}
    推荐文章
    Welshy1235  ·  在移动模式下引导导航栏不工作
    3 年前
    Kudafukuron  ·  为什么?导航栏深色不工作(Bootstrap v5.2)?
    3 年前
    Mickey Vershbow  ·  无法获取复选框的“checked”属性
    3 年前
    Amr El-Nagdy  ·  如何折叠导航栏onclick(bootstrap5)
    3 年前
    Kameron_Huggins  ·  无法在Bootstrap 5中更改<body>的字体系列吗?
    3 年前
    Wadu Hek  ·  引导汉堡图标与Navbar品牌不一致
    4 年前
    964  ·  移动站点略超出设备屏幕宽度
    4 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    4 年前
    Faizan Gigani  ·  导航栏向右滑动
    4 年前
    fightstarr20  ·  带固定边栏的Bootstrap 5布局-下表推送内容
    4 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号