Question

我设法让图像粘在页脚上，但在进入响应模式时未能使页脚粘到底部。我是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: nerolikkh@gmail.com </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;
}

Answer 1

＆＃13;

.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;
}

＆＃13;

<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: nerolikkh@gmail.com </p>
        </div>
  </div>

＆＃13;

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

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

在Bootstrap中修复页脚

1 个答案: