twitter-bootstrap 使用 CSS、HTML 和 Bootstrap 将响应式元素定位到屏幕底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32700758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position-responsive element to the bottom of the screen using CSS, HTML, and Bootstrap
提问by SkyboyKP
To start off I'm relatively new to CSS, Bootstrapand HTML. I want to position a responsive element at the bottom of the screen. So I have this code which makes it behave responsively:
首先，我对 CSS、Bootstrap和 HTML比较陌生。我想在屏幕底部放置一个响应元素。所以我有这个代码，使它的行为响应：
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
但是我如何让它粘在页面的底部？我已经尝试过具有绝对位置的 ID/Class 选择器。它将元素移动到底部，但不再响应。
回答by Destination Designs
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
回答by Brad Frost
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
一种解决方案可能是将所需元素包装在另一个 div 中，然后定位包装元素以将其固定到屏幕底部。您的标记可能如下所示：
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
你的风格可能看起来像：
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-containerelement to the bottom left of the viewport, and would set the width to 100%of the viewport. The layout-specific rules applied to .col-sm-12would remain intact.
这会将.fixed-container元素附加到视口的左下角，并将视口的宽度设置为100%。应用于的布局特定规则.col-sm-12将保持不变。
回答by gwar9
Here is a simple solution to your problem.
这是您问题的简单解决方案。
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
确保您的元素位于包装 div 中。由于您使用的是 Bootstrap，请使用：
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
在这个容器内放置你的元素/部分，包括你的页脚：
<footer class="col-md-12">
Your footer should have the following CSS.
您的页脚应具有以下 CSS。
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
这是一个小提琴。您可以看到页脚位于具有黑色边框的容器底部。
