Question

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

我做了一些改动，虽然它在浏览器中很棒，但是它在响应模式下会崩溃。背景颜色停止在页脚的中途，其余部分显示为白色背景。提交/重置按钮大部分不在页面上。

我已经为此工作了几天，似乎无法使其以响应模式工作。

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

页脚的代码为：

Country,City,YearRange,Value1,Value2
Germany,Berlin,2016-2020,10,7
Germany,Berlin,2011-2015,1,4
Israel,Tel Aviv,2006-2010,4.5,1

CSS为：

<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>

我肯定可以在这里使用一些帮助。其他需要让我知道。

Answer 1

这是我在上面的评论中提到的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链接。 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

我希望这对您有用：）

Answer 2

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

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

Answer 3

我似乎已经解决了自己的问题。我回到original footer并重新开始。（它可以在线运行，所以我必须进行一些更改，对吗？）这次我删除了左侧的一些文本，以免使其过长（这就是将其推得太远的原因）。现在它似乎可以正常工作。

感谢大家的帮助！

Bootstrap 4中的页脚出现问题

3 个答案: