ブートストラップフッタ列の積み重ねとフッタの色の緩み

Question

基本的に黒い背景のフッターを作成しました。私は3 Col-4を持っていて、その中にさまざまな情報があります。デスクトップ上では見た目は良さそうだが、モバイル上では、私が必要とする列が積み重なっている。彼らがフッタを積み重ねると、それ以上行くことはありませんので、下に大きな白い部分があります。私は誰かが見て何かを提案できるかどうか疑問に思っていた。私が初心者なので、コードはおそらく乱雑です。あなたはそれが動作する必要がある値に

"COL-SM- *"

を変更することができますブートストラップで携帯colsのために

#footer { 
 
\t height: 200px; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t background-color: #000000; 
 
\t width: 100%; 
 
    
 
}

<footer> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
<div class="col-sm-4 col-md-4"> 
 
<br> 
 
<br> 
 
Home<br> 
 
Services<br> 
 
Gallery<br> 
 
About<br> 
 
Contact 
 
</div> 
 
    <div class="col-sm-4 col-md-4"> 
 
     <aligncenter>Check Out Our Other pages</aligncenter><br> 
 
     <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br> 
 
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br> 
 
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2> 
 
</div> 
 
<div class="col-sm-4 col-md-4"> 
 
     <div class="container-fluid" 
 
<br> 
 
<br> 
 
<alignright> 
 
Registered office<br> 
 
    
 
14 Stott Court<br> 
 
    
 
Tweedmouth<br> 
 
    
 
Berwick-Upon-Tweed<br> 
 
    
 
Northumberland<br> 
 
    
 
TD152YP 
 
</alignright> 
 
     </div>

Answer 1

小さな画面でのみ。

#footer { 
 
\t height: 200px; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t background-color: #000000; 
 
\t width: 100%; 
 
    
 
}

<footer> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
<div class="col-sm-12 col-md-4"> 
 
<br> 
 
<br> 
 
Home<br> 
 
Services<br> 
 
Gallery<br> 
 
About<br> 
 
Contact 
 
</div> 
 
    <div class="col-sm-12 col-md-4"> 
 
     <aligncenter>Check Out Our Other pages</aligncenter><br> 
 
     <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br> 
 
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br> 
 
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2> 
 
</div> 
 
<div class="col-sm-12 col-md-4"> 
 
     <div class="container-fluid" 
 
<br> 
 
<br> 
 
<alignright> 
 
Registered office<br> 
 
    
 
14 Stott Court<br> 
 
    
 
Tweedmouth<br> 
 
    
 
Berwick-Upon-Tweed<br> 
 
    
 
Northumberland<br> 
 
    
 
TD152YP 
 
</alignright> 
 
     </div>