html - 如何适合显示 100% 宽度的页脚标签

Question

我试图将页脚宽度设置为 100%，但不起作用。

在Bootstrap中默认footer等标签不适合显示，分别宽度不是100%。这是为什么？

HTML代码:

<div style="clear:both;"></div>

    <footer class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span>  This is a small footer. </small></p>

        <img src="img/fb.png" alt=""> &nbsp
        <img src="img/twitter.png" alt=""> &nbsp
        <img src="img/youtube.png" alt=""> &nbsp
        <img src="img/myspace.png" alt="">
    </footer>

我也尝试了一些解决方案，但没有成功。

footer {
    padding: 2em 0;
    border-top: 1px solid #ddd;
    color: #999;
    text-align: center;
    background-color: #2b2b2b;

    background-size: contain;
    background-size: 100%;
}

我还添加了以下代码，但还是没有成功:

footer{
padding: 2em 0;
border-top: 1px solid #ddd;
color: #999;
text-align: center;
background-color: #2b2b2b;

min-width:100%;
}

我还在 CSS 的开头添加了重置边距和填充

* {
margin: 0;
padding: 0;
}

这里有插图说明http://i.imgur.com/wSl053x.png

Answer 1

您的页脚需要位于 container-fluid 而不是 container 元素内。如 Bootstrap documentation 中所述:

Use .container-fluid for a full width container, spanning the entire width of your viewport.

示例:http://www.bootply.com/db004KoXCR

.example {
  background-color: #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<div class="footer">
  <div class="container example">
    <div class="row">
      <div class="col-xs-12">
        Non-fluid container Non-fluid container Non-fluid container
      </div>
    </div>
  </div>
</div>

<div class="footer">
  <div class="container-fluid example">
    <div class="row">
      <div class="col-xs-12">
        Fluid container Fluid container Fluid container
      </div>
    </div>
  </div>
</div>