Bootstrap 4 中的页脚有问题

Question

我在 Bootstrap 4 的网站上工作，我正在使用 https://www.codeply.com/go/7TzhebXBdX/bootstrap-4-footer-with-contact-form

的页脚

我对它进行了一些更改，虽然它在浏览器中表现出色，但在响应模式下出现故障。背景颜色在页脚的一半处停止，其余部分显示为白色背景。 submit/reset 按钮大多不在页面上。

我已经为此工作了几天，但似乎无法让它在响应模式下工作。

页脚可以在这里看到：http://leeunderwood.org/_tmp/index.html

页脚的代码是：

<footer class="footer">
    <div class="container">
         <div class="row">
            <div class="col-md-7">
                <h4 class="footer-logo-text"><i class="fa fa-book"></i>&nbsp;&nbsp;spreading biblical truth in a darkened world ...</h4>
                  <div class="row">
                    <div class="col-10">
                      <p>
                      The goal here is to separate myth, traditions, pagan practices, and man-made stories from the truth of the Hebrew Scriptures. Many people believe that because something has been written, taught, or practiced for centuries, or even decades, it must be scriptural. Yet nothing could be further from the truth. Time does not necessarily prove the validity of something. It's therefore important to research these writings, teachings, practices, and beliefs to determine their origin and whether they actually do have a scriptural basis. <a href="/about.html" class="text-light bg-dark">more ...</a></p>
<br>
<p style="font-size:90%;margin-bottom:0;">
This Website is not affiliated with any government, institution, organization, religious group, or political establishment. Copyright &copy; 2004 - <script>document.write(new Date().getFullYear());</script> | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib.</a> Customization has been done by site owner.</p>

        </div>
                </div>
                <ul class="nav">
                    <li class="nav-item"><a href="" class="nav-link pl-0"><i class="fa fa-facebook fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-github fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
                </ul>
                <br>
            </div>
            <div class="col-md-5">

<p class="contactUs"><a id="contactMe">Contact Us</a></p>

<!--   beginning of form   -->

<form id="myForm" class="contact__form" method="post" action="mailContact.php">

    <!-- form message -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-success contact__msg" style="display: none" role="alert">
                Your message was sent successfully.
            </div>
        </div>
    </div>
    <!-- end message -->

    <!-- form element -->
    <div class="row">
        <div class="col-md-6 form-group">
            <input name="name" type="text" class="form-control" placeholder="Name" required>
        </div>
        <div class="col-md-6 form-group">
            <input name="email" type="email" class="form-control" placeholder="Email" required>
        </div>
<!--               <input id="test_email" name="email" size="25" type="text" value="" />   -->
        <div class="col-12 form-group">
            <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
        </div>
        <div class="col-12">
            <input name="submit" type="submit" class="btn btn-success btn-sm" value="Send Message">  <input class="btn btn-success btn-sm" type="button" onclick="myFunction()" value="Reset form">
        </div>
    </div>
    <!-- end form element -->
</form>

<!--   end of form   -->

            </div>
        </div>

<!--   Footer design from: https://www.codeply.com/go/7TzhebXBdX/bootstrap-4-footer-with-contact-form redesigned by Lee Underwood   -->
<!--   Contact form code from: https://themehunt.com/blog/53-tutorial/162-how-to-create-an-ajax-contact-form-without-any-plugin   -->
</footer>

CSS是：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 300px;
}

.footer {
  position: absolute;
  width: 100%;
  height: 300px;
}

/* Taller footer on small screens */
@media (max-width: 34em) {
    body {
      margin-bottom: 500px;
    }
    .footer {
      height: 500px;
    }
}

footer {
  padding-top:30px;
  padding-bottom:20px;
  background-color: #2F4454;
  color:#bbb;
  font: 400 13px/1.2em 'Open Sans',sans-serif;
}

footer a {
  color: #999;
  text-decoration:none;
}

footer a:hover, footer a:focus {
  color: #aaa;
  text-decoration:none;
  border-bottom:1px dotted #999;
}

footer .form-control {
  background-color: #1f2022;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
  border: none;
  resize: none;
  color: #d1d2d2;
  padding: 0.7em 1em;
}

.form-control {
  font-size: 0.8em;
}

我当然需要一些帮助。还有什么需要告诉我的。

Answer 1

您应该增加媒体查询的高度，直到它容纳所有页脚内容。

@media (max-width: 34em){
  .footer {
    height: 700px;
  }
}
.footer {
    position: absolute;
    width: 100%;
    height: 700px;
}

Answer 2

我好像自己解决了这个问题。我回到 original footer 重新开始。（它在线工作，所以我一定改变了什么，对吧？）这次我删除了左侧的一些文本，以免让它太长（这就是将它压得太低的原因）。现在好像可以正常使用了。

感谢大家的帮助！

Answer 3

这是我在上面的评论中提到的 script.js 的代码。

$(document).ready(function(){
    setDynamicHeightFooter();
});
$(window).resize(function(){
    setDynamicHeightFooter();
})

function footHeight(){
    return $('footer.foooter .container').outerHeight()
}

function setDynamicHeightFooter(){
    $('footer.footer').css('height',footHeight);
    $('body').css('margin-bottom', footHeight);
}

正如我在评论中提到的，您需要一个 jquery 文件，您可以从 jquery 站点下载它，或者直接为 jquery 库添加 CDN link，例如.. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

我希望这对你有用:)

Bootstrap 4 中的页脚有问题

Trouble with footer in Bootstrap 4

footer

contact-form

bootstrap-4