Bootstrap Modal不允许链接？

时间：2018-08-01 13:46:40

标签： javascript jquery html css bootstrap-4

我正在使用Bootstrap4。对于我的导航，当您单击MENU按钮时，将出现一个模式下拉菜单。我正在尝试在模态上创建链接，但是由于某些原因，无法激活任何链接。我缺少引导模态属性来触发链接的东西吗？任何帮助将不胜感激。

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-nav-content">
          <div class="modal-nav-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

4 个答案:

答案 0 :(得分：1)

Bootstrap 4模态默认将“ pointer-events”属性设置为none。 要解决此问题，请将以下内容添加到您的style.css文件中：

.modal-dialog {
    pointer-events: all;
}

然后链接将起作用

答案 1 :(得分：1)

您的HTML结构中存在一些问题。您没有遵循引导模态结构。希望这对您有帮助！

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

  <style type="text/css">
    a {
      color: inherit;
      text-decoration: inherit;
    }
    
    a:hover {
      color: inherit;
      text-decoration: inherit;
    }
    
    body {
      font-family: 'Roboto Condensed', sans-serif;
    }
    /* ---------------------------------------------------- */
    /* navigation */
    
    .navbar-toggler:focus,
    .navbar-toggler:active {
      outline: none;
      border: none;
      box-shadow: none;
    }
    
    .menu {
      padding-left: 10px;
    }
    
    .fa-bars,
    .menu {
      color: #006699 !important;
    }
    
    .navbar-text {
      color: gray;
    }
    
    .mainlink {
      font-size: 1.75em;
      line-height: 1.25em;
      font-weight: 400;
    }
    
    .sublink {
      font-size: 1em;
      line-height: 1.15em;
    }
    
    .navbar-toggle {
      margin-left: 15px;
      margin-right: 0;
    }
    
    .modal-nav-content {
      /* width: 100%; */
      height: auto;
    }
    
    .modal-nav-body {
      margin-top: 10em;
    }
    
    .modal-nav-body p {
      color: white;
      margin: 0;
      padding: 0;
      padding-top: 6px;
      padding-bottom: 6px;
      /* width: 100%; */
    }
    
    .modal-nav-body h5 {
      color: white;
      line-height: 1.5em;
      font-size: 2.75em;
      font-weight: 700;
      /* padding-left: 2em; */
      padding-bottom: 1.5em;
    }
    
    .navbar-toggler::before {
      border: none;
      background: transparent !important;
    }
    
    .navbar-text {
      display: inline-block;
      word-spacing: 2em;
    }
    
    .navbar-text a {
      color: #808080;
    }
    
    .modal-nav .modal-content {
      border: none;
      background: none;
      border-radius: 0;
    }
  </style>

  <title>Crossings Realty</title>
</head>

<body>
  <nav class="navbar bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="content/crossings-nav.png" alt="Crossings Realty">
      </a>
      <!-- <span class="navbar-text mr-auto pl-5">
              <a href="#">Listings</a>
              <a href="#">About</a>
              <a href="#">Contact</a>
            </span> -->
      <span class="navbar-text ml-auto pr-2">
              <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
              <a class="menu">MENU</a>
            </span>
      <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <i class="fas fa-bars fa-lg"></i>
            </button>
    </div>
  </nav>


  <div class="modal fade modal-nav" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <div class="modal-nav-body">
            <div class="row">
              <h5>Explore Crossings Realty.</h5>
            </div>
            <div class="row">
              <div class="col-sm">
                <p class="mainlink"><a href="#">HOME</a></p>
                <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                <p class="sublink"><a href="#">Buy</a></p>
                <p class="sublink"><a href="#">Rent</a></p>
                <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
              </div>
              <div class="col-sm">
                <p class="mainlink"><a href="#">ABOUT</a></p>
                <p class="sublink"><a href="#">Full Experience</a></p>
                <p class="sublink"><a href="#">We Know Real Estate</a></p>
                <p class="sublink"><a href="#">Great Agents</a></p>
                <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                <p class="sublink"><a href="#">How we sell fast</a></p>
                <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                <p class="sublink"><a href="#">We are part of MLS</a></p>
                <p class="sublink"><a href="#">Mortgage Calculator</a></p>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>




  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

答案 2 :(得分：0)

您缺少引导模式所需的类名称。您需要为内容和主体定义几个自定义变量，但是模态内容和模态主体是模态正常工作所必需的。我在下面添加了它们，并且链接可以正常使用，但是您将需要调整自定义样式，因为默认模式样式现在无法显示某些内容。

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal-nav-content">
          <div class="modal-body modal-nav-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

答案 3 :(得分：0)

您只需要更改：

  1. model-nav-content与model-content
  2. model-nav-body与model-body

as model-nav-body和other不是引导程序中的默认类。这是您已应用的自定义类，因此会产生错误。

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  color: inherit;
  text-decoration: inherit;
}

body {
  font-family: 'Roboto Condensed', sans-serif;
}

/* ---------------------------------------------------- */


  /* navigation */

.navbar-toggler:focus, .navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
  }

.menu {
    padding-left: 10px;
  }

.fa-bars, .menu {
  color: #006699 !important;
}

.navbar-text {
  color: gray;
}

.mainlink {
  font-size: 1.75em;
  line-height: 1.25em;
  font-weight: 400;
}

.sublink {
  font-size: 1em;
  line-height: 1.15em;
}

.navbar-toggle {
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  /* width: 100%; */
  height: auto;
}

.modal-nav-body {
  margin-top: 10em;
}

.modal-nav-body p {
  color: white;
  margin: 0;
  padding: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  /* width: 100%; */
}

.modal-nav-body h5 {
  color: white;
  line-height: 1.5em;
  font-size: 2.75em;
  font-weight: 700;
  /* padding-left: 2em; */
  padding-bottom: 1.5em;
}

.navbar-toggler::before {
  border: none;
  background: transparent !important;
}

.navbar-text {
  display: inline-block;
  word-spacing: 2em;
}

.navbar-text a {
  color: #808080;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <title>Crossings Realty</title>
  </head>

  <body>
    <nav class="navbar bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">
           <img src="content/crossings-nav.png" alt="Crossings Realty">
        </a>
        <!-- <span class="navbar-text mr-auto pl-5">
          <a href="#">Listings</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </span> -->
        <span class="navbar-text ml-auto pr-2">
          <i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
          <a class="menu">MENU</a>
        </span>
        <button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-bars fa-lg"></i>
        </button>
      </div>
    </nav>
    <div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-body">
              <div class="row">
                <h5>Explore Crossings Realty.</h5>
              </div>
                <div class="row">
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">HOME</a></p>
                    <p class="mainlink pt-4"><a href="#">SELLING</a></p>
                    <p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
                      <p class="sublink"><a href="#">Buy</a></p>
                      <p class="sublink"><a href="#">Rent</a></p>
                      <p class="mainlink pt-4"><a href="#">CONTACT</a></p>
                  </div>
                  <div class="col-sm">
                    <p class="mainlink"><a href="#">ABOUT</a></p>
                      <p class="sublink"><a href="#">Full Experience</a></p>
                      <p class="sublink"><a href="#">We Know Real Estate</a></p>
                      <p class="sublink"><a href="#">Great Agents</a></p>
                    <p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
                      <p class="sublink"><a href="#">How we sell fast</a></p>
                      <p class="sublink"><a href="#">FAQs on buying and selling</a></p>
                      <p class="sublink"><a href="#">Why use a Realtor?</a></p>
                      <p class="sublink"><a href="#">We are part of MLS</a></p>
                      <p class="sublink"><a href="#">Mortgage Calculator</a></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

相关问题
最新问题