如何使页脚停留在页面底部引导 4.

这个问题可能是重复的！我希望我的页脚位于页面底部，但在滚动时不会固定在那里。我希望它像本页底部的页脚一样页脚示例. 到目前为止，这是我的页脚代码，我一直在使用 bootstrap 4，但我找不到一个类来帮助我完成我想要的东西。

<footer>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitch"></i></a>
</footer>

我很清楚引导类

.fixed-bottom但就像我说的，我不希望页脚在滚动时保留。

你可以使用纯CSS，像这样：

footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color:#fff;
}

我认为您可能会从 Flexbox 中受益，除非我误解了您的目的。无论哪种方式，我相信 Flexbox 就是答案，只要让我知道这是否适合您，或者我们可以更深入地探索。

这是代码笔：https://codepen.io/codespent/pen/eKqzjX

body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
color: #ccc;
margin: 1em;
padding: 1em;
width: 80%;
border-top: 1px solid blue;
justify-content: center;
}
footer i {
padding: 1em;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitch"></i></a>
</footer>
</div>

那么这里有什么重要意义呢？

我们正在将文档的正文设置为Flexbox容器，以允许我们的内部元素成为弹性项目。
我们将flex-direction设置为column像传统文档流一样垂直流动。
我们为主容器提供 1flex-grow值以填充所有未占用的空间。
我们为footer提供了自动的弹性基础，但也使其成为一个灵活的容器，使我们的链接毫不费力地与工作空间水平对齐。

请参考我的回答这里：页脚停留在底部 - 堆栈溢出这很简单，即使您不使用引导程序，也会解决您的问题

相关内容

最新更新

热门标签：