文章/答案/技术大牛

发布

社区首页 >问答首页 >汉堡包切换按钮不工作是引导

问汉堡包切换按钮不工作是引导
EN

Stack Overflow用户

提问于 2022-06-05 08:00:44

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

我使用HTML、CSS和引导程序在本地主机和本地主机上设置了标题，切换按钮正常工作，但是当我在wordpress上按下这段代码时，切换按钮就停止工作了。我采取了一切可能的措施让它发挥作用。我已经尝试过许多顺序的CDN，在引导CDN之前也添加了jquery，但是没有任何效果。我还做了所有必要的更改，这是必要的，比如将数据-目标转换为数据-bs-目标，但什么都没有发生。我还跟踪了这个帖子自举4肚脐切换汉堡是按钮不工作，但不是为我工作。这是密码..。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header</title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>



  <style>
    * {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
    }
    
    li {
      color: rgb(108, 108, 189);
    }
    
    .color {
      color: #EE0000;
    }
    
    .bg-color {
      background-color: #ed5353;
    }
    
    .navbar .navbar-brand img {
      background-color: #212529;
    }
    
    #login:hover {
      background-color: #EE0000;
    }
    
    a.nav-item:hover {
      background-color: #EE0000;
      border-radius: 4px;
    }
  </style>

</head>

<body>


  <nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-center">


    <a class="navbar-brand text-light mx-5" href="#"><img src="https://ablore.com/wp-content/uploads/2022/05/logo.png" style="width: 150px; background-color: #212529;" alt=""></a>



    <span class="justify-content-center text-light d-inline d-md-inline d-lg-none" style="margin: auto;"><i
            class="fa-solid fa-globe fs-4"></i>
          English
    
          <button class="btn btn-dark mx-4 justify-content-center from-center d-inline d-md-inline d-lg-none" id="login"
            type="submit">Login</button></span>


    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active text-light" href="#">Home <span class="sr-only">(current)</span></a>


        <div class="dropdown show">
          <a class=" dropdown-toggle nav-item nav-link text-light" style="text-decoration: none;" href="#collapseExample" data-bs-toggle="collapse">
            Services
        </a>

        </div>

      </div>















      <a class="nav-item nav-link text-light from-center" href="#">Portfolio</a>
      <a class="nav-item nav-link text-light" href="#">Insights</a>

      <div class="container d-flex" style="justify-content: end;">
        <span class=" text-light d-none d-md-none d-lg-inline"><i class="fa-solid fa-globe fs-5"></i>
              English
    
              <button class="btn btn-dark mx-4  d-none d-md-none d-lg-inline" id="login" type="submit">Login</button></span>
      </div>
    </div>


  </nav>




  <div class="collapse position-absolute" id="collapseExample">
    <div class="card card-body">

      <div class="container-fluid">
        <div class="row">
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> BRANDING
                  <hr>
                </span>
            <ul>
              <li>Logo Design</li>
              <li>Website Design</li>
              <li>E-commerce Graphics</li>
              <li>Social Media Graphics</li>
              <li>Ads Graphics</li>
              <li>Video Ads</li>
              <li>Company Profile Design</li>
              <li>Content Writing</li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> PRODUCT DEVELOPMENT
                  <hr>
                </span>
            <ul>
              <li>SaaS Development</li>
              <li>Web Portal Development</li>
              <li>E-commerce Development</li>
              <li>Mobile Application Development</li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-6"> <span class="fs-5 fw-bold"> SALES
                  <hr>
                </span>
            <ul>
              <li>Sales Process Development</li>
              <li>Automated Sales Process</li>
              <li>Sales Team</li>
              <li>Tele Caller</li>
              <li>Customer Support Team</li>
              <li>Sales Software</li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> MARKETING
                  <hr>
                </span>
            <ul>
              <li>Social Media Management</li>
              <li>Paid Media Management</li>
              <li>Email Marketing</li>
              <li>Content Marketing</li>
              <li>Search Engine Optimization</li>
              <li>Bulk SMS Marketing</li>
              <li>Bulk WhatsApp Marketing</li>
              <li>Automated Calls</li>
            </ul>
          </div>

          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CLOUDS
                  <hr>
                </span>
            <ul>
              <li>Development Servers</li>
              <li>Shared CPU</li>
              <li>Dedicated CPU</li>
              <li>Intel Servers</li>
              <li>AMD Servers</li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> IT INFRASTRUCTURE
                  <hr>
                </span>
            <ul>
              <li>DevOps Engineer</li>
              <li>IT Support</li>
              <li>Product Development</li>
              <li>Project Infrastructure</li>
              <li>Product Architecture</li>
            </ul>
          </div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> ERP SOFTWARE
                  <hr>
                </span></div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CRM SOFTWARE
                  <hr>
                </span></div>
          <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> REMOTE SOFTWARE
                  <hr>
                </span></div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

</body>

</html>

html

css

twitter-bootstrap

togglebutton

回答 1

Stack Overflow用户

发布于 2022-06-05 18:59:41

您有许多无效的HTML和不正确的Bootstrap Navbar属性、元素。

您将button与in span for 、English和Login菜单混合使用。这是无效的HTML。
您只在上面的代码中使用引导4JS。你没有任何CSS。
您使用引导程序4资产，而代码是引导程序5。
因为#3，代码是不正确的属性。例如，在引导4中，导航条使用data-toggle="collapse"，而在引导5中使用data-bs-toggle="collapse"等等。

那么，您真正想使用的是哪个版本呢？

这不可能在您的本地主机上工作，而在WordPress上是坏的。它们都应该被打破，因为您使用了不正确版本的CSS和JS或HTML属性，包括类。

快速修复

为了快速修复，我使用了正确的引导CSS & JS版本(v.5)，它只是工作得很好。

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

li {
  color: rgb(108, 108, 189);
}

.color {
  color: #EE0000;
}

.bg-color {
  background-color: #ed5353;
}

.navbar .navbar-brand img {
  background-color: #212529;
}



#login:hover {
  background-color: #EE0000;
}

a.nav-item:hover {
  background-color: #EE0000;
  border-radius: 4px;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-center">


  <a class="navbar-brand text-light mx-5" href="#"><img src="https://ablore.com/wp-content/uploads/2022/05/logo.png" style="width: 150px; background-color: #212529;" alt=""></a>



  <span class="justify-content-center text-light d-inline d-md-inline d-lg-none" style="margin: auto;"><i class="fa-solid fa-globe fs-4"></i> English</span>

  <button class="btn btn-dark mx-4 justify-content-center from-center d-inline d-md-inline d-lg-none" id="login" type="submit">Login</button>


  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active text-light" href="#">Home <span class="sr-only">(current)</span></a>


      <div class="dropdown show">
        <a class=" dropdown-toggle nav-item nav-link text-light" style="text-decoration: none;" href="#collapseExample" data-bs-toggle="collapse">
          Services
        </a>

      </div>

    </div>


    <a class="nav-item nav-link text-light from-center" href="#">Portfolio</a>
    <a class="nav-item nav-link text-light" href="#">Insights</a>

    <div class="container d-flex" style="justify-content: end;">
      <span class=" text-light d-none d-md-none d-lg-inline"><i class="fa-solid fa-globe fs-5"></i>
        English

        <button class="btn btn-dark mx-4  d-none d-md-none d-lg-inline" id="login" type="submit">Login</button></span>
    </div>
  </div>


</nav>




<div class="collapse position-absolute" id="collapseExample">
  <div class="card card-body">

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> BRANDING
            <hr>
          </span>
          <ul>
            <li>Logo Design</li>
            <li>Website Design</li>
            <li>E-commerce Graphics</li>
            <li>Social Media Graphics</li>
            <li>Ads Graphics</li>
            <li>Video Ads</li>
            <li>Company Profile Design</li>
            <li>Content Writing</li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> PRODUCT DEVELOPMENT
            <hr>
          </span>
          <ul>
            <li>SaaS Development</li>
            <li>Web Portal Development</li>
            <li>E-commerce Development</li>
            <li>Mobile Application Development</li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-6"> <span class="fs-5 fw-bold"> SALES
            <hr>
          </span>
          <ul>
            <li>Sales Process Development</li>
            <li>Automated Sales Process</li>
            <li>Sales Team</li>
            <li>Tele Caller</li>
            <li>Customer Support Team</li>
            <li>Sales Software</li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> MARKETING
            <hr>
          </span>
          <ul>
            <li>Social Media Management</li>
            <li>Paid Media Management</li>
            <li>Email Marketing</li>
            <li>Content Marketing</li>
            <li>Search Engine Optimization</li>
            <li>Bulk SMS Marketing</li>
            <li>Bulk WhatsApp Marketing</li>
            <li>Automated Calls</li>
          </ul>
        </div>

        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CLOUDS
            <hr>
          </span>
          <ul>
            <li>Development Servers</li>
            <li>Shared CPU</li>
            <li>Dedicated CPU</li>
            <li>Intel Servers</li>
            <li>AMD Servers</li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> IT INFRASTRUCTURE
            <hr>
          </span>
          <ul>
            <li>DevOps Engineer</li>
            <li>IT Support</li>
            <li>Product Development</li>
            <li>Project Infrastructure</li>
            <li>Product Architecture</li>
          </ul>
        </div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> ERP SOFTWARE
            <hr>
          </span></div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> CRM SOFTWARE
            <hr>
          </span></div>
        <div class="col-md-2 col-sm-6"><span class="fs-5 fw-bold"> REMOTE SOFTWARE
            <hr>
          </span></div>
      </div>
    </div>
  </div>
</div>

在小提琴上看到它的作用。

在编写代码时，一定要注意您使用的是哪个版本，不要仅仅混合它们，也不要从任何地方复制和粘贴它们。

保持专注，只坚持你使用的版本。

票数 0

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

原文链接：

https://stackoverflow.com/questions/72505699

复制

相似问题

问汉堡包切换按钮不工作是引导
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问汉堡包切换按钮不工作是引导EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问汉堡包切换按钮不工作是引导
EN