Question

Here's the HTML code when my footer navbar is fixed，这很好，但是当它是静态的（shown here）时，它不仅会延长，从而重叠它上面的项目，但它也不再停靠在页面的底部。如何将其恢复原状并将其恢复到原始尺寸，我该怎么办？谢谢！

Answer 1

使用导航栏发出问题：

导航栏包含在col-lg-9的容器和行中。所以，你必须先修复它。关闭列后面的行和容器。然后你的导航栏不会重叠＆＃34;一切。
最后，bootstrap.css中没有navbar-static-bottom类。所以，它只是一个普通的旧导航栏，这意味着它将从导航栏类继承20px的底部边距，所以除非你指定自己的样式来覆盖它，否则它永远不会在页面的最底部。

<强> HTML：

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="page-header">
                        <h3>Lorem <small>ipsum</small></h3>
                    </div><!--pg header-->
                    <img class="featuredImg" src=".jpg" width="100%">
                    <p>Lorem ipsum</p>
                    <h4>A heading</h4>
                    <p>Lorem ipsum</p>
                </div><!--panel body-->
            </div><!--panel-->
        </div><!--col-lg-9-->
    </div><!--row-->
</div> <!--container-->
<div class="navbar navbar-default navbar-static-bottom">
    <div class="container">
        <p class="navbar-text pull-daft">© 2014 </p>
        <a href="" class="navbar-btn btn-danger btn navbar-right">Button</a>
    </div><!--container-->
</div><!--navbar-->

修改

对不起，因为这不是你的标记......

要滚动你自己的.navbar-static-bottom类，我会使用与.navbar-static-top相同的规则，并将margin-bottom更改为0.你甚至可以添加20px的上边距。

.navbar-static-bottom { border-radius: 0; z-index: 1000; border-width: 0 0 1px; padding-right: 0; padding-left: 0; margin: 20px 0 0; }

navbar-static-bottom重叠在它上面的内容/不再位于底部

1 个答案: