可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

for the past hour I've been trying to figure out what exactly is wrong with my sticky footer not working. I have the exact same structure as the example given on the getboostrap site, but it doesn't seem to work. Any ideas what is exactly wrong?

All the bootstrap css files are loaded correctly.

    <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>

I found the solution. I thought including all the CSS would also have the CSS for the footer but apparently it does not. You require the following to make a sticky footer work with bootstrap

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;
}

回答1:

Why you are not using :

.navbar-fixed-bottom

This will solve your bottom fixed navigation issue and you can place anything in it.

回答2:

Made a quick Fiddle with your code and some tweaks to the footer: 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>

回答3:

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;
}

回答4:

You can find an example for a 'sticky footer with a fixed navbar' (fixed to the top of the page) in the bootstrap documentation: 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;
}

回答5:

Simple unique solution for sticky footer baes on @teh0wner, i added some JS

CSS

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

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

回答6:

This is how it worked for me.

I added the Footer ID and custom style values to that ID , and for the same look and feel added "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%;
}

回答7:

In bootstrap 3, container and footer classes, somehow override your css rules. I tried to change my footer's background-color. I tried many things that I found as solutions on the web and couldn't done successfully. After use clearfix class for footer the page became what I really want to see.

.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>