我想从右下角的popover中关闭bott关闭div，我不知道怎么做

Question

正如您在右下角所见，我有两个按钮。只有“关于”按钮才有效。单击它时会出现一个新的div。它工作正常。但是，当您调整窗口大小并使其缩小时，“关于”和“反馈”按钮会折叠成一个按钮。单击该按钮时，弹出窗口会显示这两个按钮。关于按钮，我不知道如何从popover工作中做出关于按钮的正常工作。因此，当我点击他时，大约出现了div。

抱歉我的英语不好:(

$(document).ready(function() {
   $("[data-toggle = 'popover']").popover({
      html: 'true',
      content : '<button class="about-btn btn footer-buttons footerbuttonshov ">About</button> ' +
                '<button class="btn footer-buttons footerbuttonshov">Feedback</button>'
   });
});



(function( $ ) {
  $.fn.keepRatio = function(which) {
      return $(this).each(function () {
          var $this = $(this);
          var w = $this.width();
          var h = $this.height();
          var ratio = w/h;
          $(window).resize(function() {
              switch(which) {
                  case 'width':
                      var nh = $this.width() / ratio;
                      $this.css('height', nh + 'px');
                      break;
                  case 'height':
                      var nw = $this.height() * ratio;
                      $this.css('width', nw + 'px');
                      break;
              }
          });
      });
  };
})( jQuery );

$(document).ready(function(){
    $('.login-container, .about-container, #x1, .round-buttons, .input, .popover, #ok, #forgot, #ok2  ').keepRatio('width');
});

$(document).ready(function(){
    $("#x1").click(function(){
        $(".about-container").hide();
    });
    $(".about-btn, #about-btn2").click(function(){
        $(".about-container").show();
    });
});

body {
    height:900px;
}

#navbar-main {
    background: #017f55;
    border:1px solid #000;
    border-radius: 0;
    clear:both;
    position:fixed;
    float:right;
}
#title {
    color:#000;
    font-size: 43px;
    top:7px;
}

#select {
    color:#000;
    height:30px;
}
.wrapper {
    height:89%;
}
.login-container {
    position:absolute;
    background-color: #017f55;
    height:80%;
    width:40.9%;
    min-width: 200px;
    min-height: 300px;
    margin:0 auto;
    top:100px;
    border-radius: 25px;
    right:29.5%;
}
p {
    font-size: 30px;
    color:#fff;
    text-align: center;
}
input[type="text"]{
    width: 87%;
    height: 45px;
    border-radius: 25px;
    border:none;
    padding-left: 15px;
    color:#e0e0e0;
    margin-top: 2%;
    font-size:30px;
    font-size: 1.5vw;
    margin-left: 3%;
}
input[type="button"]{
    border:none;
    border-radius: 25px;
    height:45px;
    background: #f98500;
    font-weight: bolder;
    margin-top: 2%;
    width:15%;
    font-size: 30px;
    font-size: 1.5vw;
    margin-left: 3%;
}
#forgot {
    margin-left: 3%;
}
#ok {
    margin-left: 56.5%;
}
#hr {
    color: #000;
    background-color: #000;
    height: 1px;
    border:none;
    width: 95%;
    margin-top:2%;
}
#register {
    margin:auto;
}
#ok2 {
    margin-left:42.5%;
}
.round-buttons {
    height:25px;
    width:3%;
    background-color:#f98500;
    display:inline-block;
    border-radius: 50px;
    margin-left: 2%;
}
.question-mark {
    font-size:20px;
    font-size: 1vw;
}
.question-mark:hover {
    cursor: pointer;
}
.popover {
    width:200px;
}
.about-container {
    position:absolute;
    background-color: #fff;
    height:80%;
    width:40.9%;
    min-width: 200px;
    min-height: 300px;
    margin:0 auto;
    top:100px;
    border-radius: 25px;
    right:29.5%;
    border:1px solid #000;
    display: none;
}
#about-footer {
    background-color: #017f55;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}
#about {
    display: inline-block;
    font-size: 45px;
    font-size: 3vw;
    margin-left:38%;
}
#about-text {
    color: #000;
    text-align: left;
    font-size:40px;
    font-size: 2.5vw;
    margin-left: 3%;
    margin-top: 3%;
}
#x1 {
    position:absolute;
    display:inline-block;
    width: 5%;
    height:40px;
    background-color: #f98500;
    top:3%;
    right:3%;
    border-radius: 25px;
}
#x1:hover, #x2:hover {
    cursor: pointer;
}
.x-buttons {
    color:#000;
    font-weight: bolder;
    font-size: 1.5vw;
}
#nav-footer {
    background: #017f55;
    display:inline;
    text-align: right;
    border:1px solid #000;
}
.footer-buttons {
    display:inline;
    font-size: 20px;
    padding-right: 20px;
    background: none;
}
.icon-bar{
    border: 1px solid #fff;
}
#footer-navbar {
    border-color: #000;
}

#footer-button {
    border:1px solid #333
}
#footer-button:hover {
    background-color: #333;
}
#footer-button:active {
    background-color: #333333;
}
.footerbuttonshov:hover{
    background:#f98500;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Code Test</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="js/script.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


    </head>
    <body>
        <!--Header-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

        <nav id="navbar-main" class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="images/test_logo.png">
            </div>

            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav center">
                <li><a href="#index" id="title">Code Test</a></li>
                <li><a>
                    <select id="select">
                        <option value="English">English</option>
                        <option value="Devanagari">Devanagari</option>
                    </select>
                </a></li>
              </ul>
            </div>
          </div>
        </nav>

        <!--Main Container-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
        <div class="wrapper">
            <div class="login-container">
                <p>Login</p>
                <form>
                    <input type="text" value="Username" class="input"></input><br>
                    <input type="text" value="Password" class="input"></input><br>
                    <input type="button" value="Forgot" id="forgot"></input>
                    <input type="button" value="OK" id="ok"></input>
                </form>
                <hr id="hr" noshade>
                <p id="register">Register</p>
                <form>
                    <input type="text" value="Email" class="input"></input><div class="round-buttons"><p class="question-mark" data-toggle="popover"
                          data-content="Enter Email" data-placement="right" data-trigger="hover">?</p></div><br>
                    <input type="text" value="Username" class="input"></input><div class="round-buttons"><p class="question-mark" data-toggle="popover"
                          data-content="Enter username" data-placement="right" data-trigger="hover">?</p></div><br>
                    <input type="text" value="Password" class="input"></input><div class="round-buttons"><p class="question-mark" data-toggle="popover"
                          data-content="Enter password" data-placement="right" data-trigger="hover">?</p></div><br>
                    <input type="text" value="Repeat Password" class="input"></input><br>
                    <input type="button" value="OK" id="ok2"></input>
                </form>
            </div>
            <div class="about-container">
                <div id="about-footer"><p id="about">About</p><div id="x1" class="x1"><p class="x-buttons">X</p></div></div>
                <p id="about-text">Front-end Web Developer Test</p>
            </div>
        </div>


            <!--Footer-->
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

        <nav id="nav-footer" class="navbar navbar-default navbar-fixed-bottom">
            <div id="footer" class="container2">
                <div class="navbar-header">
                  <button id="footer-button" type="button" class="navbar-toggle collapsed" data-toggle="popover" data-target="#footer-navbar" data-placement="top">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
                <div id="footer-navbar" class="navbar-inner navbar-content-center collapse navbar-collapse">
                    <button class="btn footer-buttons about-btn">About</p>
                    <button class="btn footer-buttons">Feedback</p>
                </div>
            </div>
        </nav>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>