Question

问题背景：

我目前正在使用ASP.NET MVC项目中的Bootstrap框架将基本页面放在一起。

问题：

我正在使用静态定位在页面底部的NavBar类在页面上实现页脚。这样做很好，但我留下了一个间隙 - 如下图中红色和黄色箭头所示＆＃39;页脚和页面底部之间。我希望页脚转到页面底部，我该如何实现呢？

enter image description here

代码：

以下是页面的当前布局：

<html>
<head>
<meta charset="utf-8" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>
    Hello!
</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-inner">
        <a class="brand">Test Site</a>

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="/Articles/List">Articles</a></li>
                <li><a href="/Blogs/All">Blog</a></li>
                <li><a href="/About">About</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Test drop down
                        <b class=" caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
                        <li><a href="http://www.google.com">Google</a></li>
                        <li><a href="http://www.amazon.com">Amazon</a></li>
                        <li><a href="http://www.aol.com">AOL</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">

    <div class="row-fluid">
        <div id="slidingCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item">
                    <img src="/Content/NewPana1.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic1</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
                <div class="item">
                    <img src="/Content/NewPana2.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic2</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
                <div class="item">
                    <img src="/Content/NewPana3.jpg" />
                    <div class="carousel-caption">
                        <h4>Pic3</h4>
                        <p>This is a pic</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control left" href="#slidingCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#slidingCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <script>
        $(function () {
            $('.carousel').carousel({
                interval: 7000
            });
        });
    </script>

    <div class="row-fluid">
        <div class="span12">
            <div class="img-rounded">
                <div class="hero-unit HeroUnitBackground">
                    <h1>Test</h1>
                    <p>Paragraph FTW</p>
                    <p><a class="btn btn-primary btn-large">Learn more</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2><br />
            Vivamus dictum ultricies nunc, nec egestas nisi molestie vel.
            Sed sed tortor et nibh tincidunt vulputate. Cum sociis natoque penatibus et magnis
            dis parturient montes, nascetur ridiculus mus. Duis porta, elit in pretium blandit,
            felis enim auctor felis, quis porta augue tortor vel felis. Maecenas metus sapien,
            laoreet eu magna id, interdum dapibus ligula. Sed vestibulum lectus lacus, ac varius quam fermentum et.
            <br /><br />
        </div>

        <div class="span4">
            <h2>Sed pulvinar nisi ut neque rhoncus, at aliquam mi scelerisque.</h2><br />
            Suspendisse ac tempor tortor. Curabitur libero urna, scelerisque quis commodo ac,
            sodales eu metus. Mauris rhoncus sit amet risus et eleifend. Mauris consectetur velit dui,
            ut molestie risus porta nec. Mauris egestas in risus a scelerisque. Aliquam blandit,
            ante adipiscing iaculis vehicula, magna mi imperdiet purus, convallis dignissim nisi velit nec justo.
            Nullam et leo non lectus pretium tincidunt. Morbi congue enim eu aliquam tempor. Sed in imperdiet felis,
            sed placerat arcu. Aliquam ligula orci, suscipit non lorem non, aliquet congue sapien.
            <br /><br />
        </div>

        <div class="span4">
            <h2>Nullam laoreet nisi ac ipsum semper, ornare auctor justo.</h2><br />
            Suspendisse ac tempor tortor. Curabitur libero urna, scelerisque quis commodo ac,
            sodales eu metus. Mauris rhoncus sit amet risus et eleifend. Mauris consectetur velit dui,
            ut molestie risus porta nec. Mauris egestas in risus a scelerisque. Aliquam blandit,
            ante adipiscing iaculis vehicula, magna mi imperdiet purus, convallis dignissim nisi velit nec justo.
            Nullam et leo non lectus pretium tincidunt. Morbi congue enim eu aliquam tempor. Sed in imperdiet felis,
            sed placerat arcu. Aliquam ligula orci, suscipit non lorem non, aliquet congue sapien.
            <br /><br />
        </div>
    </div>

    <div class="row-fluid">
        <div class=" span12"><img class="img-rounded" src="/Content/NewPana4.jpg">     </div>
    </div>
    <div class="row-fluid">

        <div class="span6">
            <h2>
                Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
            </h2>
            Morbi sollicitudin, leo at tristique hendrerit, lacus purus posuere eros,
            quis feugiat mauris nisl ut eros. Aliquam id dapibus turpis, ut laoreet neque.
            Curabitur elit arcu, congue ac augue in, tempor pharetra ante. Nulla eu iaculis lorem.
            Nullam convallis nibh vel vulputate convallis. Suspendisse eget sollicitudin quam.
            Suspendisse eu mi enim. Fusce mollis nec eros sit amet interdum. Donec non euismod arcu.
            Integer porta, arcu eget porttitor feugiat, lorem ante congue sem, nec aliquet neque mauris id nulla.<br /><br />
            <div class=" text-center">
                <img class="img-rounded" src="\Content\Land1.jpg" />
            </div>
            <br /><br />
        </div>
        <div class="span6">
            <div class="FooterBackground">
                <h2>
                    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
                </h2>
                Morbi sollicitudin, leo at tristique hendrerit, lacus purus posuere eros,
                quis feugiat mauris nisl ut eros. Aliquam id dapibus turpis, ut laoreet neque.
                Curabitur elit arcu, congue ac augue in, tempor pharetra ante. Nulla eu iaculis lorem.
                Nullam convallis nibh vel vulputate convallis. Suspendisse eget sollicitudin quam.
                Suspendisse eu mi enim. Fusce mollis nec eros sit amet interdum. Donec non euismod arcu.
                Integer porta, arcu eget porttitor feugiat, lorem ante congue sem, nec aliquet neque mauris id nulla.<br /><br />
            </div>
            <div class=" text-center">
                <img class="img-rounded" src="\Content\Land2.jpg" />
                <br /><br />
            </div>
        </div>
    </div>
</div>
<nav class="navbar navbar-inverse navbar-static-bottom">
    <div class="navbar-inner">
        Test
    </div>
</nav>
</body>
</html>

Answer 1

<强> EDITED

尝试在页脚中添加一个类：

<强> HTML

 <nav class="navbar navbar-inverse navbar-static-bottom customFooter">

<强> CSS

 .customFooter {


 margin-bottom: 0;


}

Answer 2

你需要一个粘性页脚。看看这个链接： Sticky Footer Example

同样here您可以看到示例代码。

Answer 3

默认情况下，.navbar类的边距为20px。您需要覆盖仅适用于底部导航的内容。我会将margin-bottom: 0添加到您的nav.navbar-static-bottom课程中。

Answer 4

bootstrap css中有一个面板页脚。你可能想考虑使用它。

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

Answer 5

管理到最后对此进行排序。

这是最终结果：

enter image description here

使用<footer></footer>标记在网络上找到了一个示例。

页脚标记的css：

 footer {
        color: #666;
        background: #222;
        padding: 17px 0 18px 0;
        border-top: 1px solid #000;
        height: 160px;
    }

Twitter Bootstrap - Footer定位问题

5 个答案: