Question

<!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！或者您可以直接在以下

上看到它

Answer 1

所以我发现了两个问题，首先是您的资源未正确链接。请再次检查您的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>

以相同的顺序将这三个链接放在文档的头部。

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

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

Here是代码的作用。

为什么在屏幕尺寸过小的情况下，点击折叠按钮后无法打开？

1 个答案: