html - 在Bootstrap中修复页脚

我设法使图像贴在页脚上，但是在进入响应模式时未能使页脚贴在底部。我是一名新手，需要您的帮助。

HTML：页脚位于表格后面。

<div class="instructables-container" id="instructables" style="position: relative; margin-left: 0px;height: 10px; ">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading" style="color: #2E2E2E; text-align: center;">INSTRUCTABLES</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>Instructables</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                       <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
            </div>
        </div>

 </div>

  <div class="footer" style="height:30%; background-color: white;">
        <div class="robot" style="position: absolute; margin:auto; left:0; right:0; bottom: 20px;">
            <a href="http://instructables.com/member/neroliko"><img src="http://i.imgur.com/q7GBNF1.png" /></a>
        </div>
        <div class="words" style="position: absolute; width:100%;background-color:#E6E6E6; bottom:0px;">
             <p style=" font-size: 13px; font-family: 'Open Sans', 'Helvetica Neue', Georgia, serif;">Contact: [e-mail] </p>
        </div>
  </div>

CSS：

.instructables-container {
    margin-top: 25px;
    margin-bottom: 300px;
    margin-left: 0px;
    letter-spacing: 2px;
    line-height: 2;
    font-size: 15px;
    font-family: Helvetica;
}

.table{
    margin-top: 80px;
    text-align: center;
    margin-left: 11%;
    border: 0px;
}

.footer {
    position: absolute;
    font-family: Helvetica;
    letter-spacing: 3px;
    width: 100%;
    height: 40px;
    line-height: 20px;
    font-size: 4px;
    text-align: center;
    height:400px;
}

最佳答案

.instructables-container {
    margin-top: 25px;
    margin-bottom: 300px;
    margin-left: 0px;
    letter-spacing: 2px;
    line-height: 2;
    font-size: 15px;
    font-family: Helvetica;
}

.table{
    margin-top: 80px;
    text-align: center;
    margin-left: 11%;
    border: 0px;
}

.footer {
    position: absolute;
    font-family: Helvetica;
    letter-spacing: 3px;
    width: 100%;
    height: 40px;
    line-height: 20px;
    font-size: 4px;
    text-align: center;
    height:400px;
}
.test div{
  z-index:1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="instructables-container" id="instructables" style="position: relative; margin-left: 0px;height: 10px; ">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading" style="color: #2E2E2E; text-align: center;">INSTRUCTABLES</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
            <div class="row test">
                <div class="col-lg-3 col-md-6 col-xs-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>Instructables</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-6 text-center">
                    <div class="service-box">
                       <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-6 text-center">
                    <div class="service-box">
                        <p style="font-size: 60px;">x</p>
                        <p>xx</p>
                    </div>
                </div>
            </div>
        </div>

 </div>

  <div class="footer" style="height:30%; background-color: white;">
        <div class="robot" style="position: absolute; margin:auto; left:0; right:0; bottom: 20px;">
            <a href="http://instructables.com/member/neroliko"><img src="http://i.imgur.com/q7GBNF1.png" /></a>
        </div>
        <div class="words" style="position: absolute; width:100%;background-color:#E6E6E6; bottom:0px;">
             <p style=" font-size: 13px; font-family: 'Open Sans', 'Helvetica Neue', Georgia, serif;">Contact: [e-mail] </p>
        </div>
  </div>

您应该为移动屏幕添加正确的类，以便为移动屏幕中的每个div定义所需的宽度。您可以为该.col-xs-6使用bootstrap类，因此这些div之一将是屏幕的一半。这是您的html代码，也是jsfiddle

使用内联样式不好，您应该将其用作内部或外部样式！