Question

如何使此标准Bootstrap 3页脚的行为与您在本页底部看到的stackoverflow.com页脚完全相同？完整的浏览器窗口宽度彩色背景和文本由页面宽度限制。我在主题上测试了所有其他stackoverflow帖子，对我的页面没有任何作用。我的页面HTML在下面。

感谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roadmap</title>
    <link href="/Content/css?v=Bz3KZjU_pdOm2wAVr7z_ylCuQzQDs1O8N6pV4cvXc_Q1" rel="stylesheet"/>
    <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script> 
</head>

<body style="padding-top:0">

<div class="container" style="position: relative">

    <div align="right" class="body-content" style=" margin-top: 8px; margin-bottom: 8px;">

    <p style="display: inline; width: 1%; font-size: 90%; background-color: white; opacity: 0.8; padding: 3px; ">
    <a href="/Account/Register">Register</a> | <a href="/Account/LogIn">Log in</a>
    </p>

</div>

<div class="navbar navbar-inverse">

<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" rel="home" href="/" ><img src="/Assets/images/logo.png"></a>            
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">                
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Product<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Overview</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Image Gallery</a></li>
                    <li><a href="#">What&#39;s New</a></li>
                </ul>
            </li>
            <li><a href="/Support">Support</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">

            <li><a href="/Download">Download</a></li>
        </ul>
    </div>
</div>
</div>

        <div class="container body-content" style="height:200px">
            <div class="row">
                <div class="col-md-5" style="color:White">
                    <h1 style="margin-top: 60px">Roadmap</h1>
                    <p style="font-size:1.2em; font-weight:lighter">Upcoming release</p>
                </div>
            </div>
        </div>

        <!-- position absolute clears right margin, we set it again -->
        <div class="container body-content">

        <h2>Version 9.0</h2>
        <p>Planned for Q4 2015</p>
        <hr>
        <footer>
           <p class="pull-right" style="font-size: 85%;">
           <a href="/Store/Purchase_Terms" style="margin-right: 20px">Purchase terms and conditions</a>
           <a href="/Home/Privacy_Policy" style="margin-right: 20px">Privacy policy</a>
           <a href="/Company/Contact">Contact</a></p>
           <p style="font-size: 85%; line-height: 180%">Copyright &copy; 2015 - CompanyName</p>
        </footer>
   </div>           
    <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
</div>

Answer 1

您需要使用“.container”类将页脚从div中取出。

<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Roadmap</title>
  <link href="/Content/css?v=Bz3KZjU_pdOm2wAVr7z_ylCuQzQDs1O8N6pV4cvXc_Q1" rel="stylesheet" />
  <script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
 </head>
 <body style="padding-top:0">
  <div class="container" style="position: relative">
    <!-- Page Content Here -->
  </div>
  <footer>
    <div class="container">
      <!-- Footer content here -->
    </div>
  </footer>
  </body>
 </html>

Answer 2

您是否尝试将页脚内容包装在容器中，所以......

<footer>
    <div class="container">
        <p class="pull-right" style="font-size: 85%;">
            <a href="/Store/Purchase_Terms" style="margin-right: 20px">Purchase terms and conditions</a>
            <a href="/Home/Privacy_Policy" style="margin-right: 20px">Privacy policy</a>
            <a href="/Company/Contact">Contact</a>
       </p>
       <p style="font-size: 85%; line-height: 180%">Copyright &copy; 2015 - CompanyName</p>
    </div>
</footer>

Answer 3

不完全确定这是否是您正在寻找的答案，但您应该调整身体和页脚样式中的填充和边距。 Bootstrap默认添加填充，因此调整左右填充并将边距调整为0可能会有所帮助。我无法准确地告诉你它在你的代码中是什么，但我之前遇到过这个问题，它对我有用。

Answer 4

我很确定你在谈论保证金，在css中，你必须将其删除。喜欢这个

body{margin: 0px;}

Bootstrap 3完整浏览器宽度页脚

4 个答案: