Question

我在bootstrap中有一些问题，我开发网站但是在网站客户端完成后说他们不想要响应网站。

所以，我首先将.container宽度修复为960px！important;

它会起作用.. !!但问题是我也在使用.row类，其中每个行类都在响应它所包含的内容。

我希望页脚宽度为100％，但是当我调整浏览器的大小时水平滚动它将删除背景颜色。

我能做些什么...

请参阅网站： Snapshot 1

当浏览器调整大小时，请查看问题是什么： Snapshot 2

我的html代码是用bootstrap 3编写的：

<footer>    
<div class="row footercolor">
        <div class="container">  
        <div class="row">
            <div class="col-xs-2 ">
                  <div class="row">
                  <h5 class="undr footertitle">Lorem Ipsum</h5>
                 </div>
             </div>

             <div class="col-xs-3">
              <div class="row">
                  <h5 class="undr footertitle">QUICK LINKS</h5>
                  <div class="col-xs-6">                  
                      <ul class="footerlist list-group">

                       </ul>
                  </div>     
                  <div class="col-xs-6">  
                       <ul class="footerlist list-group">

                       </ul>
                  </div>
                  </div>
             </div>

             <div class="col-xs-4">
             <div class="row">
               <h5 class="undr footertitle">OUR NEIGHBORHOODS</h5>
                   <div class="col-xs-6">                     
                      <ul class="footerlist list-group">

                       </ul>
                   </div>
                   <div class="col-xs-6">                      
                       <ul class="footerlist list-group ">

                       </ul>
                  </div>
             </div>
             </div>
             <div class="col-xs-3">
                  <div class="row">
                        <h5 class="undr footertitle">GET WEEKLY LISTING UPDATES</h5>
                        <div class="input-group">
                          <input type="text" class="form-control">
                          <span class="input-group-addon btn-ftrbtn">Add Me</span>
                        </div>              
                  </div>
                  <div class="row"><br/></div>
                  <div class="row">
                        <ul class="list-unstyled list-inline pull-right">
                            <li><a href="#"><img src="img/fb.png"></a></li>
                            <li><a href="#"><img src="img/twitter.png"></a></li>
                            <li><a href="#"><img src="img/pintrest.png"></a></li>
                        </ul>                                     
                  </div>      
              </div>
          </div>
    </div>
    </div> <!-- /container -->
</footer>

＆安培;我的CSS代码是：

.footercolor {
    background-color: #5e6872;
}
.footer{color:#c6c6c9}

.footertitle {
    font-family: 'myriad_prosemibold_condensed' !important;
    font-size: 13px!important;
    color: #fff !important;
    letter-spacing: 0.5px;
}
.footerlist li a {
    font-family: 'myriad_prolight_semicondensed' !important;
    font-size: 12px!important;
    color: #c6c6c9 !important;
    text-decoration: none
}
.footerlist li a:hover {
    color: #fff !important;
    cursor: pointer
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important; 
}
.container{min-width:960px !important;}

最后请给我解决方案...... 任何帮助将不胜感激......

Answer 1

你的引导伴侣标记不正确....

使用容器＆gt;行＆gt;跨度

而不是：

<div class="row footercolor"> <div class="container">

订单应该是：

<div class="container footercolor">  <div class="row ">

Answer 2

将以下代码添加到CSS文件中将解决问题。

html, body {
 min-width:960px;
}

Bootstrap 3滚动时背景颜色问题..？

2 个答案: