Question

我正在我的个人网站上工作，无法让汉堡包工作。

在移动设备中，它只是一行中的所有菜单选项，而不是像经典汉堡包一样的不同行。

最初，汉堡包完全不起作用，但我在网站上添加了/*******HAMBURGER FIX*********/部分，现在它正在运作，但正如我所说，不正确。

html {
  height: 100%;
}

body {
  background-image: url('background.png');
  background-size: cover;
  background-position: center;
}

#content {
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

#const {
  color: #FFFFF5;
  font-weight: bold;
  font-size: 5em;
}

hr {
  width: 1000px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}

.social i {
  padding-top: 100%;
  font-size: 3em;
  color: #cccccc;
}

.sections {
  padding-top: 5%;
}

.sections .section-option i {
  padding-top: 15px;
  color: #999999;
  font-size: 13em;
}

.logo {
  font-size: 1.2em;
}


/*******HAMBURGER FIX*********/

@media (min-width: 991px) and (max-width: 768px) {
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-header .collapse,
  .navbar-toggle {
    display: block !important;
  }
  .navbar-header {
    float: none;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  
  <!-- jquery CDN -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <!-- font awesome CDN -->
  <script src="https://use.fontawesome.com/7627dbb339.js"></script>
  <title>Halil Süheyb Becerek</title>
</head>

<body>

  <!-- start of the navbar -->
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
    
              </button>
          <a class="navbar-brand" href="#"><i class="fa fa-code logo" aria-hidden="true"></i>    Halil Süheyb Becerek</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>    Home</a></li>
            <li><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>    Blog</a></li>
            <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i>    Projects</a></li>
            <li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i>    Work /    <i class="fa fa-university" aria-hidden="true"></i> Education History</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>    About</a></li>
            <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>    Contact</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </div>
  </nav>
  <!-- end of the navbar -->

  </div>
  </div>

  <div class="container">
    <div id="content">
      <div class="row">
        <!-- <div id="const" class="col-xs-12">
                        SITE UNDER CONSTRUCTION
    
                    <div class="progress">
                   <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                    10%
                   </div>
                   </div>
    
    
                    </div> -->
        <div class="sections">
          <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
          <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-university" aria-hidden="true"></i></a></div>
          <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>
          <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></div>
        </div>

      </div>

      <div class="row">
        <div class="social">
          <div class="col-xs-2"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
          <div class="col-xs-2"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></div>
          <div class="col-xs-2"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
          <div class="col-xs-2"><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></div>
          <div class="col-xs-2"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></div>
          <div class="col-xs-2"><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></div>

        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

您需要添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您需要在div代码后移除两个结束nav代码。除此之外我没有发现任何问题。

CSS

html{
        height: 100%;
    }
body{

    background-image: url('background.png');
    background-size: cover;
    background-position: center;
}
#content{
    text-align: center;

    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                 0px 8px 13px rgba(0,0,0,0.1),
                 0px 18px 23px rgba(0,0,0,0.1);
}
#const{
    color: #FFFFF5;
    font-weight: bold;
    font-size: 5em;
}
hr{
    width: 1000px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2)
}

.social i{
    padding-top: 100%;
    font-size: 3em;
    color: #cccccc;
}
.sections{
    padding-top:5%;
}
.sections .section-option i{
    padding-top: 15px;
    color:#999999;
    font-size: 13em;
}
.logo{
    font-size: 1.2em;
}

/*******HAMBURGER FIX*********/
@media (min-width: 991px) and (max-width: 768px) {
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display: block !important;
}
.navbar-header {
    float:none;
}}

HTML

 <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><i class="fa fa-code logo" aria-hidden="true"></i>    Halil Süheyb Becerek</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>    Home</a></li>
            <li><a href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>    Blog</a></li>
            <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i>    Projects</a></li>
            <li><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i>    Work /    <i class="fa fa-university" aria-hidden="true"></i> Education History</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>    About</a></li>
            <li><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i>    Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
     </div>
    </nav>
    <!-- end of the navbar -->

    <div class="container">
        <div id="content">
            <div class="row">
                <!-- <div id="const" class="col-xs-12">
                    SITE UNDER CONSTRUCTION
                <div class="progress">
               <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
                10%
               </div>
               </div>
                </div> -->
                <div class="sections">
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-university" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>
                    <div class="col-lg-6 col-xs-12 section-option"><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></div>
                </div>
            </div>

            <div class="row">
                <div class="social">
                <div class="col-xs-2"><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></div>
                <div class="col-xs-2"><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></div>
                </div>
            </div>
        </div>
    </div>

link for reference

汉堡菜单无法正常工作

1 个答案: