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

我有一个黏糊糊的页脚，并且多次更改它，因为我不断遇到各种问题。我之所以使用这样的代码，是因为在以前的尝试中，当内容在移动设备上填满页面时，页脚会变得更高以容纳堆叠的按钮，并且会与内容重叠。我尝试过的其他版本会在内容框的末尾添加一个页脚，但如果内容只占了页面的一半，则页脚将位于页面的一半。我现在的版本很好用，除了在内容框中有一条奇怪的线，我假设页脚占位符是，即使页脚粘在底部。有人能帮我吗？我这儿有把小提琴。我还想澄清的是，只有当浏览器的高度较高时，该条才会可见。我还想解释一下，在我的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 ------- -->

标志
门户

公告


废话废话
废话废话
废话废话
废话废话
废话废话


提交错误
功能请求
接触

我检查了您的代码，发现在您的css中，

#main

Id是样式化的。您给它一个属性

overflow:auto。
如果要删除页脚上方的水平条，必须将此属性更改为
overflow:hidden或将其删除

这是因为在您的代码中，wrap具有
宽度：100%在引导程序3中，
行
的属性为
左边距：-15px
和
右边距：-15px
。正是因为这个原因，它将-15px的空间移到了右边

因为根据

你太棒了！！非常感谢你！！欢迎@user3581600。如果你觉得这个答案有用，那么你应该投票支持我的答案。我想我做得对……我点击了你答案旁边的复选标记。
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.