Question

我正在尝试将页脚宽度设置为100％，但不能正常工作。

在Bootstrap默认情况下，页脚和其他标签不适合显示，宽度不是100％。那是为什么？

HTML code：

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

中所述

使用.container-fluid作为全宽容器，跨越视口的整个宽度。

示例：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>

如何适合显示100％宽度的页脚标签

1 个答案: