twitter-bootstrap - Bootstrap 3 和粘性页脚

Question

在过去的一个小时里，我一直在试图弄清楚我的粘性页脚不起作用到底是什么问题。我的结构与 getboostrap 网站上给出的示例完全相同，但它似乎不起作用。有什么想法到底错在哪里？

所有引导 css 文件均已正确加载。

    <body style="">

    <div id="wrap">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                        <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

                </div>
            </div>
        </div>


        <div class="container">



<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
    </div>
</div>
        </div>

    </div>

    <div id="footer">
        <div class="container">
            <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
        </div>
    </div>


</body>

我找到了解决方案。我认为包括所有的 CSS 也会有页脚的 CSS，但显然它没有。您需要以下内容才能使粘性页脚与引导程序一起使用

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

score 12 · Accepted Answer

为什么你不使用：

.navbar-fixed-bottom

这将解决您的底部固定导航问题，您可以在其中放置任何东西。

score 7 · Accepted Answer

对您的代码做了一个快速的 Fiddle 并对页脚进行了一些调整：http: //jsfiddle.net/2Zaxt/。

<div id="footer" class="container">
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="navbar-inner navbar-content-center">
            <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
        </div>
    </nav>
</div>

score 6 · Accepted Answer

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

score 1 · Accepted Answer

这就是它对我有用的方式。

我将 Footer ID 和自定义样式值添加到该 ID 中，并为相同的外观添加了“navbar-default”

HTML

<div id="footer" class="navbar-default">
  <div class="container">
    <p>Your Footer Content Here</p>          
  </div>
</div>

CSS

#footer {
   background-color: #F5F5F5;
   bottom: 0;
   height: 60px;
   position: relative;
   width: 100%;
}

score 1 · Accepted Answer

您可以在引导文档中找到“带有固定导航栏的粘性页脚”（固定在页面顶部）的示例：http: //getbootstrap.com/examples/sticky-footer-navbar/

CSS：

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

/* Fixed navbar styles */
body > .container {
  padding-top: 60px;
}

score 1 · Accepted Answer

@teh0wner 上的粘页脚的简单独特解决方案，我添加了一些 JS

CSS

html {
  position: relative;
  min-height: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

JS

$(document).ready(function() {
    var height = $('footer').height();
    $('body').css({
        "margin-bottom": height
    });
});

score 0 · Accepted Answer

在引导程序 3、容器和页脚类中，以某种方式覆盖您的 css 规则。我试图改变我的页脚的背景颜色。我尝试了很多我在网上找到的解决方案，但都没有成功。在使用 clearfix 类作为页脚之后，页面变成了我真正想看到的。

.myFooter {
  background-color: #c4a9f1;
  width: 100%;
}
.hi-icon a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 100;
}

<footer class="footer clearfix">
  <div class="container myFooter">
    <div class=" ">
      <div class="col-sm-3">
        <h3 class="page-header">Part 1 </h3>
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
          <li>Link4</li>
        </ul>
      </div>
      <div class="col-sm-3">
        <h3 class="page-header">Part 2</h3>
        <ul>
          <li>Link1</li>
          <li>Link2</li>
          <li>Link3</li>
          <li>Link4</li>
        </ul>
      </div>


    </div>
  </div>
  </div>
</footer>

twitter-bootstrap - Bootstrap 3 和粘性页脚

7 回答 7

Related

Reference