ブートストラップカラムが応答しない

Question

私のカラムに苦労しています。彼らは反応がありません。ページを縮小して電話のクエリをエミュレートすると、ページが余分にあるように私の列が広がっています。私は画像を表示します。

私の（問題が存在する）フッターのHTML：

<footer class="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a> 
        <a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a> 
       <br><br><br> 
       <p>&copy; 2016 Truespeed Internet Services - All Rights Reserved</p> 
       </div> 
      </div> 
     </footer> 

マイCSS：

.footer { 
    height: 100px; 
    background-color: #277FD8; 
    position: absolute; 
    bottom: 0; 
    width: 1100px; 
} 
.footer a{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 
.footer p{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 

写真：

Answer 1

あなたの問題はあなたということですフッターを固定幅の1100pxに設定します。

フッターをwidth: 100%に設定すると、列が反応します。

Answer 2

フッターで1100px幅を削除します。

次へフッターのクラスを変更し

：

.footer { 
    height: 100px; 
    background-color: #277FD8; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

Answer 3

私は扱いになるように、あなたはそれのための容器を置くことができます。したがって、あなたの.containerの幅に従います。

<footer class="footer"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <a class="col-xs-2 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a> 
 
\t <a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a> 
 
\t <a class="col-xs-2 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a> 
 
\t <a class="col-xs-2 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a> 
 
\t <a class="col-xs-2 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a> 
 
\t <a class="col-xs-2 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a> 
 
    </div> 
 
</div> 
 
</footer>