2016-04-11 11 views
0

フッタはなんらかの理由でページの右側にあります。私はそれが何を引き起こしているのか把握できません。ここでブートストラップ3 - ページの右側にフッタがあります

enter image description here

HTML

<footer class="footer"> 
    <div class="container"> 
     <div class="navbar-social-accs pull-left"> 
     <nav> 
      <h4>Boring Links</h4> 

      <ul class="pull-left"> 
      <li> 
       <%= link_to "About", about_path %> 
      </li> 
      <li> 
       <%= link_to "Contact", contact_path %> 
      </li> 
      <li> 
       <%= link_to "Terms", root_path %> 
      </li> 
      <li> 
       <%= link_to "Privacy Policy", root_path %> 
      </li> 
      </ul> 
     </nav> 
     </div> 

     <div class="navbar-social-accs pull-right"> 
     <nav> 
      <h4>Follow Us!</h4> 
      <ul> 
      <li> 
       <%= link_to "About", about_path %> 
      </li> 
      <li> 
       <%= link_to "Contact", contact_path %> 
      </li> 
      <li> 
       <%= link_to "Terms", root_path %> 
      </li> 
      <li> 
       <%= link_to "Privacy Policy", root_path %> 
      </li> 
      </ul> 
     </nav> 
     </div> 
    </div> 
    </div> 
</footer> 

CSS

/* footer */ 

footer { 
    margin-top: 45px; 
    padding-top: 5px; 
    color: $gray; 
    a { 
    color: $black-gray; 
    &:hover { 
     color: $black-gray; 
    } 
    } 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 150px; 
    background-color: #f5f5f5; 
    ul{ padding:15px; 
    li { list-style-type: none; } 

    } 
} 

がちょうど空白がそれの左側にあったが、それは実際に押されている場合、私は、パディングを追加していますページはそれよりも広くなり、中央のフッターを投げる権利。

+0

を正規化する.footerleft: 0;を追加あなたはcodepen/jsfiddleを作ることはできますか? – NooBskie

+0

'left:0'が動作するように' left:0'を追加してみてください。それが何であるか、それがなぜ働いたのかは分かりません。あなたが答えとしてそれを掲示することができるなら、私はあなたにそれを与えるでしょう。 – Rob

答えて

1

は、レイアウト

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; /** Added **/ 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 150px; 
    background-color: #f5f5f5; 
    ul{ padding:15px; 
    li { list-style-type: none; } 

    } 
} 
関連する問題