Bootstrap 容器与底部固定的 div 重叠
Bootstrap container being overlapped by div which is bottom fixed
上面的 Bootstrap 容器被下面的 div 遮盖了,下面的 div 应该固定在底部。
div 下面应该包含几个按钮,这些按钮永远不会与上面具有动态形式的容器重叠。
我已经形成了一个类似问题的jsfiddle。
https://jsfiddle.net/alowsarwar/0pz3j8f2/
<container>
<a class="btn btn-primary" href="#">
Button
</a>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br> fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
</container>
<div class="panel navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom stuff
</div>
只需删除底部的边距div,问题就会得到解决。
<container>
<a class="btn btn-primary" href="#">
Button
</a>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br> fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
</container>
<div class="panel navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px; margin:0;">
bottom stuff
</div>
Bootstrap 容器被下面的 div 遮盖了,下面的 div 应该固定在底部。 div 下面应该包含几个按钮,这些按钮永远不会与上面具有动态形式的容器重叠。
我已经形成了一个类似问题的jsfiddle。
https://jsfiddle.net/alowsarwar/0pz3j8f2/
<container>
<a class="btn btn-primary" href="#">
Button
</a>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br> fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
</container>
<div class="panel navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom stuff
</div>
只需删除底部的边距div,问题就会得到解决。
<container>
<a class="btn btn-primary" href="#">
Button
</a>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br> fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
fffffffffff
<br>
fffffffff
<br>
ffffffffff
<br>
</container>
<div class="panel navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px; margin:0;">
bottom stuff
</div>