Bootstrap列没有响应

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

你可以为它放一个容器，这样我就可以管理。因此它会遵循.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>
	<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>
   </div>
 </div>
</footer>

Answer 3

删除页脚中的1100px宽度。

将您的页脚类更改为以下内容：

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