Question

我正在尝试这样的事情the last element at the bottom of the footer] 1 而我得到了这个：

<footer>
<div class="container-fluid">
  <div class="row">

    <div class="col-md-3 col-sm-3 pad">
      <img src="img/footer.png" class="img_footer img-responsive" alt="" />
    </div>
      <div class="col-md-9 col-sm-9">
        <div class="row test">
          <div class="col-md-8 col-lg-8">
            <p class="apropos text-justify">A Propos</p>

            <p class="text_footer text-justify">Créée en zzrklzkrjzqlqzjflq zedokq zd^q zcw qsmldkqzmdk qzmdpzqùdp qzmdkqzmdkzqmdkqmz lqmzkmqqkzmdqmkzdqmqmqmqzkmzqzdkmqzdqodzmoz</p>
          </div>
            <div class="col-md-4 col-sm-4">
              <!-- <div class="arrow_footer"> -->
                <a href="contact.html" class="arrow_footer">Nous contacter<i class="icon-right-circle"></i></a>
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>

这是CSS：

footer
 {
 width:100%;
 height:100%;
 background-color: #009900;
 }

.test
{
 position: relative;
}
.img_footer
{
 height:100%;
}
.apropos, .text_footer, .arrow_footer
{
  color:white;
}
.apropos
{
 font-weight: bold;
 font-size: 28px;
 text-transform: uppercase;
}
.pad
{
 padding:0;
}
.arrow_footer
{
 position: absolute;
  bottom:0;
  right:0;
  z-index:3;
  font-weight:500;
  font-size:24px;
  text-transform: uppercase;
  text-decoration: none;
  }
  .contact_text
  {
   text-decoration: none;

   }
  .text_footer
  {
   margin-top:50px;
  }

抱歉，我正在学习，所以代码仍然有点凌乱。我也尝试了把容器（显示器的页脚展示为flex并使用对齐项目，但两者都没有工作）。有人可以帮我理解吗？谢谢你们。

Answer 1

.arrow_footer
{
 position: absolute !important;
  bottom:0;
  right:0;
  z-index:3;
  font-weight:500;
  font-size:24px;
  text-transform: uppercase;
  text-decoration: none;
  }

将!important放在position: absolute之后。并检查它是否有效。

供参考：Bootstrap: container with absolute positioning?

Answer 2

此外，在坚持使用！important之前，这通常是禁止使用Chrome或您正在使用的任何浏览器来查看渲染的CSS。您可以直接从浏览器动态更改它以调试您正在执行的操作，这将帮助您查看浏览器实际接收的内容，而不是猜测和标记所有内容！重要的是一千次。：）

Google Chrome Debugging CSS

Answer 3

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

真的是你需要的一切。现在，您可以将容器中的内容包装在一个容器中。让我们简化一下所有内容，这里有一个演示版，可以为您提供所需的一切：

Bootstrap Sticky Footer Demo

Bootstrap Sticky Footer and Navbar Demo

绝对不能正常工作（bootstrap）

3 个答案: