bootstrap - 位置不固定的粘性页脚在页面上出现一条奇怪的线

Posted 2023-03-21

【中文标题】bootstrap - 位置不固定的粘性页脚在页面上出现一条奇怪的线

【英文标题】：bootstrap - sticky footer where the position is not fixed gets a weird line across page

【发布时间】：2014-06-18 08:46:03

【问题描述】：

我有一个粘滞的页脚，并且已经多次更改它，因为我一直遇到各种问题。我有这样的代码的原因是因为在以前的尝试中，当内容填满页面时，在移动设备上，页脚会变得更高以容纳堆叠的按钮，并且它会与内容重叠。我尝试过的其他版本会在内容框的末尾附加一个页脚，但如果内容只填满页面的一半，它会在页面的中间。这个当前版本我工作得很好，除了内容框上有一条奇怪的线，我假设页脚占位符是，即使页脚粘在底部。有人可以帮帮我吗？我在这里有一个小提琴：http://jsfiddle.net/7sPN6/1/。我还想澄清一下，该栏仅在浏览器高度较高时才可见。我还想解释一下，在我的 css 中，我将页脚的位置设置为相对位置，以便能够滚动内容，这样它就不会被页脚重叠。

<!-- ------- wrap ------- -->
<div id="wrap">
<div id="main">
    <!-- ------- begin header ------- -->
    <div id="header"> 
        <div class="row">
            <div class="col-xs-4">
                <div class="brand img-responsive" style="margin-left: 10px">logo
                </div>
            </div>

            <div class="col-xs-3">
            </div>

            <div class="col-sm-5 text-right">
                <div class="brand"> Portal
                </div>
            </div>
        </div>

        <!-- ------- make logo smaller on smaller screens ------- -->
         <div class="row">
            <div class="col-sm-9 hidden-lg hidden-md">
                <div class="logo">        
                    <a class="logo"><img src="img/logosm.png" class="img-responsive"></a> 
                </div>
            </div> 

            <div class="col-sm-3">                       
            </div>
          </div>
  <hr>
</div>


<!-- ------- content ------- -->  
    <div class="container">
        <div class="span3">
            <div class="box">
            <h2 class="intro-text text-center">Announcements</h2>
                <hr>
                <ul>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                    <li>blah blah blah</li>
                </ul>
            </div>
        </div>
    </div><!-- /.container -->

</div><!-- /.main -->
</div><!-- ------- end wrap ------- -->

<!-- ------ begin footer-------- -->
<div id="footer">
<div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
    <div class="col-sm-12 text-center"><!-- centers buttons on screen -->
        <ul class="nav navbar-nav">
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bug"></i>  Submit Bugs</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-lightbulb"></i> Feature Requests</button></li>
            <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-envelope-alt"></i> Contact</button></li>
        </ul>
    </div>
</div>

</div>

<!-- ------- end footer ------- -->

【参考方案1】：

我检查了您的代码，发现在您的 css 中 #main Id 的样式。你给它一个属性overflow:auto;。 如果您想删除页脚上的水平条，您必须将此属性更改为 overflow:hidden; 或删除它。

这是因为在您的代码中 #wrap 具有 width:100%; 并且在引导程序 3 中 row 具有 margin-left:-15px 和 margin-right:-15px 的属性。并且由于这个原因，它在右边得到了 -15px 的空间。

因为根据getbootstrap.com

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

【讨论】：

你太棒了！！非常感谢！！

欢迎您@user3581600。如果您觉得这个答案有用，那么您应该为我的答案投票。

我认为我做得对...我点击了您答案旁边的复选标记。