css - 让我的页脚 div 颜色在响应式设计中垂直。 Bootstrap 3

Question

我正在尝试让我的页脚具有灰色，以便在我的响应式设计中一直将这种颜色显示到底部。在 PC View 模式下，它一直穿过页面，当我将它带到移动尺寸时，该框仅显示页脚的一半，然后被切断。我不确定为什么它对我不起作用。

提前感谢您的关注。

HTML:

div id="footer">
    <div class="container">
        <div class="row">
            <h3 class="footertext">About Us:</h3>
            <br>
              <div class="col-md-4">
                <center>
                  <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
                  <br>
                  <h4 class="footertext">Sitemap info 1</h4>
                  <p class="footertext">here is some site map info<br>
                </center>
              </div>
              <div class="col-md-4">
                <center>
                  <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
                  <br>
                  <h4 class="footertext">Sitemap info 2</h4>
                  <p class="footertext">here is some more site map info<br>
                </center>
              </div>
              <div class="col-md-4">
                <center>
                  <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
                  <br>
                  <h4 class="footertext">sitemap info 3</h4>
                  <p class="footertext">This is some more of it.<br>
                </center>
              </div>
            </div>
            <div class="row">
            <p><center><a href="#">Contact Stuff Here</a> <p class="footertext">Copyright 2014</p></center></p>
        </div>
    </div>
</div>

CSS:

#footer {
  position: absolute;

  bottom: 0;
    left: 0;
    right: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 280px;
background-color:#B6B6B4;
    /*

Answer 1

您正在使用 col-md-4网格的类，导致每列在移动 View 中占据一整行，并且由于其固定高度 ( 280px )，您的页脚不会一直到页面底部。
尝试使用 col-xs-4适用于 x-small 设备和适合其他窗口大小的类。 这可以通过做类似 <div class="col-md-4 col-xs-6">Content</div> 的事情来实现。这意味着此列将在桌面 View 中使用 4 个网格，在移动视口(viewport)中使用 6 个网格。

可以找到更多文档 here ，在“网格选项”部分下。

顺便说一下，<center>标签已过时，我建议您使用 Bootstrap 的 text-center CSS 类。