ブートストラップでフッターを修正しました

Question

レスポンシブモードに入るときに、フッターをフッターに貼り付けることができましたが、フッターをボトムにすることができませんでした。私はブートストラップの初心者ですので、助けに感謝します。

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：あなたは携帯電話の画面でそれぞれのdiv要素に必要幅を定義する必要がありますので

.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

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

あなたは携帯電話の画面の正しいクラスを追加する必要があります。そのためには.col-xs-6のブートストラップクラスを使用できます。したがって、これらのdivの1つは画面の半分になります。ここにあなたのHTMLコードもあります。jsfiddle

そしてインラインスタイルを使うのは良いことではありません。