引导列不响应 [英] Bootstrap Columns not Being Responsive

问题描述

我在与我的列奋斗。他们没有回应。当我收缩我的页面来模拟一个电话查询，我的列仍然是分散的页面是超大。

页脚的HTML（问题所在）：

 < footer class =footer> 
< div class =container-fluid> 
< div class =row> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} PrivacyPolicy>隐私权政策< / a> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} TermsOfService>服务条款< / a> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} AcceptableUsePolicy>可接受使用政策< / a> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} WarrentyAndReturnsPolicy> Warranty&退货政策< / a> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} ThridPartyCopyrightNotices>第三方版权声明< / a> 
< a class =col-xs-2 col-md-2href ={{var protoHost}} TermsOfServicePhone>电话服务条款< / a> 
< br>< br>< br> 
< p>& copy; 2016 Truespeed Internet Services  - 保留所有权利< / p> 
< / div> 
< / div> 
< / footer> 
  

我的CSS：

  .footer {
 height：100px; 
 background-color：＃277FD8; 
 position：absolute; 
 bottom：0; 
 width：1100px; 
} 
 .footer a {
 text-align：center; 
 height：100％; 
颜色：白色
} 
 .footer p {
 text-align：center; 
 height：100％; 
颜色：白色
} 
  

图片：

解决方案

您的问题是您将页脚设置为静态宽度 1100px 。

如果您将页脚设置为 width：100％，则列将具有响应性。

I'm struggling with my columns. They're not being responsive. When I shrink my page down to emulate a phone query, my columns are still being spread out like the page is extra large. I'll show a picture.

My HTML for the footer (where the issue resides):

<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>

My 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;
}

The picture:

解决方案

Your issue is that you have the footer set to the static width of 1100px.

If you set your footer to width: 100%, the columns will then be responsive.

这篇关于引导列不响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！