个人中心
gpt4 book ai didi

javascript - 为什么在超小的屏幕尺寸下，当我点击折叠按钮时它没有打开？

转载 作者：行者123 更新时间：2023-12-02 23:40:32 24 4
gpt4 key购买 nike 

<!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">
    <title>Oxygen</title>
    <link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Mukta" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>	

  <body>
  	<nav id="header-nav" class="navbar navbar-default">
  	    <div class="container">
  		    <div class="navbar-header">
  			    <button type="button" class="navbar-toggle collapsed" data-toggle="    collapse" data-target="#myNav">
  				    <span class="icon-bar"></span>
  				    <span class="icon-bar"></span>
  				    <span class="icon-bar"></span>
  			    </button>

  			    <a  class="navbar-brand" href="index.html"><img src="images/logo.png">    </a>
  		    </div>

  		    <div class="collapse navbar-collapse" id="myNav">
  			    <ul class="nav navbar-nav navbar-right">
  				    <li ><a href="index.html"> HOME </a></li>
  				    <li ><a href="service.html">SERVICE</a></li>
  				    <li ><a href="aboutus.html">ABOUT US</a></li>
  				    <li ><a href="portfolio.html">PORTFOLIO</a></li>
  				    <li><a href="team.html">TEAM</a></li>
              <li ><a href="features.html">FEATURES</a></li>
  				    <li ><a href="blog.html">BLOG</a></li>
  				    <li class="active"><a href="contact.html">CONTACT</a></li>
  			    </ul>	
  		    </div>
  	    </div>				
    </nav>
    <div id="main-content-contact" class="container-fluid">

      <h2 class="text-center">Contact Us </h2>
      <div id="brief-overview" class="text-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere ac ut consequat semper. Varius duis at consectetur lorem. Ipsum a arcu cursus vitae
      </div>


      <div class="row">
        <div id="user-info" class="col-md-6 col-sm-6 col-xs-6">
            <form>
              <input class="nameEmail nameEmail1" type="text" name="fName" placeholder="Name">
              <input class="nameEmail nameEmail2" type="email" name="emailAddress" placeholder="Email Address">
              <br>
              <input type="text" name="Subject" placeholder="Subject">
              <br>
              <input id="enterMessage" type="text" name="Message" placeholder="Enter Your Message">
              <br>
              <input id="submit-colors" type="submit" value="Send Now">
            </form>
          
        </div>

        <div id="company-info" class="col-md-6 col-sm-6 col-xs-12">
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus luctus accumsan tortor posuere
          </div>
          <div id="contact-info">
            <span class="fas fa-map-marker-alt"></span> Address: 2400 South Avenue A<br>
            <span class="fas fa-phone fa-rotate-90"></span> Phone: +928 336 2000<br>
            <span class="fas fa-envelope"></span> Email: support@oxygen.com<br>
            <span class="fas fa-globe-americas"></span> Website: wwww.sitename.com
            
          </div>
        </div>

      </div>
      
    </div>
    <footer id="footer-area" class="panel-footer">
      <div class="container text-center">
        <img src="images/logo.png" alt="the brand photo">
        <div id="socail-container">
          <div class="fab fa-dribbble"></div>
          <div class="fab fa-facebook-f"></div>
          <div class="fab fa-instagram"></div>
          <div class="fab fa-linkedin-in"></div>
          <div class="fab fa-tumblr-square"></div>
          <div class="fab fa-twitter"></div>
          <div class="fas fa-envelope"></div>

        </div>
      </div>
    </footer>
    <div id="copyright" class="container-fluid">
      <span >&copy; 2019 Oxygen Theme.</span>
      <span >Designed by Themeum</span>
      
    </div>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
    
  </body>
</html>

我在我的项目中使用 bootstrap 3，当我缩小浏览器窗口时，会出现折叠按钮，但当我单击它时，没有任何反应考虑到，我将这段代码放在 body 元素的最后

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
您可以通过点击

查看整个html文档

here !或者直接在下面查看

最佳答案

所以我发现了两个问题，首先是您的资源没有正确链接。请再次检查您的js文件是否已正确放置在js目录下，并具有相同的名称。

我建议的其他更简单的方法是使用 cdn。使用这三个cdn

<!-- bootstrap-3 cdn -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>

按照相同的顺序将这三个链接放入文档的头部。

第二个问题是，在切换按钮的“data-toggle”属性中，可折叠分区的 id 之前有一个空格。删除该空格。

<button type="button" class="navbar-toggle collapsed" data-toggle="    collapse" data-target="#myNav">

Here是您代码的工作笔。

关于javascript - 为什么在超小的屏幕尺寸下，当我点击折叠按钮时它没有打开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56099994/

24 4 0
文章推荐： javascript - 如何收集选中的单选按钮并放入数组中然后发布到 Controller
文章推荐： python-3.x - 当错误涉及 "sqlite3.OperationalError: incomplete input "') 时如何修复 ''
文章推荐： hibernate - 如何使用 Hibernate 比较两个不同表中的字段？
文章推荐： javascript - 如何设置元素水平增长而不是换行？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com