使用带有两行的粘性页脚创建响应式 Bootstrap 样式
Posted
技术标签:
【中文标题】使用带有两行的粘性页脚创建响应式 Bootstrap 样式【英文标题】：Create responsive Bootstrap style with sticky-footer with with two rows 【发布时间】：2018-07-29 18:02:02 【问题描述】：我正在尝试围绕我的网站内容构建一个新的引导“框架”模板。 使用导航栏我没有问题......但是页脚有一些问题。
页脚应为：
粘性 有 2 行 一个带有 4 列响应内容的胖灰色 在浏览器内容框架的最底部结束的黑色细线到目前为止我有什么：
sticky-footer.css:
html
position: relative;
min-height: 100%;
body
margin-bottom: 550px;
.footer
background: black;
position: absolute;
bottom: 0;
width: 100%;
#contentFooter
margin: 0px;
width: 100%;
background: dimgray;
padding: 50px 0 40px;
margin-bottom: 30px;
color: #939fa6;
#copyrightFooter
color: black;
line-height: 30px;
#backToTopLink::before
display: block;
content: "";
width: 15px;
height: 15px;
border-left: 1px solid #93959d;
border-top: 1px solid #93959d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 13px;
margin-left: -9px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ACME Inc.</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="sticky-footer.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://via.placeholder.com/200x70"></a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Bar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Qux</a>
</li>
</ul>
</div>
</div>
</header>
<div class="container">
<div class="mt-1">
<h1>ACME Inc. presents</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<footer class="footer">
<div id="contentFooter">
<div class="container">
<div class="row">
<div class="col-md-3">
<h6>ACME Inc.</h6>
</div>
<div class="col-md-3">
<h6>How to reach us</h6>
<ul>
<li>foobar@acme.inc</li>
<li>+1 234 567 890</li>
<li>Earth, Milkyway</li>
</ul>
</div>
<div class="col-md-3">
<h6>General</h6>
<ul>
<li>Imprint</li>
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
<div class="col-md-3">
<h6>Sponsored by</h6>
<img style="max-width: 100%; height: auto; width: auto; vertical-align: middle;" src="http://via.placeholder.com/350x100">
</div>
</div>
</div>
</div>
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-md-6">
<a href="#" id="backToTopLink"></a>
</div>
</div>
</div>
</footer>
</body>
</html>
这确实有效，但我还有 3 个问题（另见图片）：
-
当浏览器图像太窄以至于响应式风格开始出现时，我突然在页脚的黑色部分下方出现了一条白色条纹。我希望黑色部分继续向下到浏览器窗口的绝对底部。
我希望在响应式变窄开始后，页脚黑色部分中的
ACME Inc. 立即居中。
我需要定义body margin-bottom: 550px; ，否则页脚会“吃掉”部分内容。问题是......有什么方法可以“动态地”实现这一点，所以我不需要重新计算近似的页脚高度并在body CSS 规则中刷新它？
Screenshot of problems from problem list
我无法使用堆栈溢出编辑器创建可运行的代码示例（找不到按钮：https://***.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/），所以我创建了一个 jsfiddle：
https://jsfiddle.net/8hb4d5t8/1/
【问题讨论】：
【参考方案1】：当浏览器图像太窄以至于响应式风格被踢时 在，我突然在页脚的黑色部分下方有一条白色条纹。 我希望黑色部分继续下降到绝对底部 浏览器窗口。
也为较小的视口定义列。不同的窗口大小有不同的列定义。所以你的 div 应该是这样的：
<div class="container" id="copyrightFooter">
<div class="row">
<div class="col-3 col-md-3">
<small class="text-muted">ACME Inc.</small>
</div>
<div class="col-6 col-md-6">
<a href="#" id="backToTopLink"></a>
</div>
</div>
</div>
这将使您的 div 具有与大屏幕上相同的相对宽度，如果您希望它们占据一整行，只需将其设置为：
<div class="col-12 col-md-3"></div>
我希望页脚黑色部分中的 ACME Inc. 是 响应式缩小开始后立即居中。
您可以实现只会影响特定屏幕宽度的 css。这是使用媒体查询完成的。
所以如果你想让它集中在小屏幕上，你可以做类似的事情
@media screen and (max-width: 992px)
.some-css-class
text-align: center;
这只会影响视口宽度
第三个问题也是如此：
我需要定义 body margin-bottom: 550px; 或其他 页脚将“吃掉”部分内容。问题是……有吗 某种方式使这个“动态”，所以我不需要重新计算 近似页脚高度并在 body CSS 规则中刷新它？
您可以使用针对不同视口宽度的媒体查询为您的正文元素定义某些边距或内边距。
This is your updated fiddle to this question.
【讨论】：
哇，这太完美了。非常感谢！以上是关于使用带有两行的粘性页脚创建响应式 Bootstrap 样式的主要内容，如果未能解决你的问题，请参考以下文章