Bootstrap 3 页脚在没有 <h2> 的情况下不起作用答案

【问题标题】：Bootstrap 3 Footer not working without <h2>Bootstrap 3 页脚在没有 <h2> 的情况下不起作用
【发布时间】：2013-09-03 13:25:03
【问题描述】：

在我看来这是一个非常奇怪的问题。基本上，我所做的只是删除<h2> 标签，并且页脚会转到顶部而不是底部。我已经包装了我的代码，并且当有标题时页脚可以工作，但是一旦我删除它，它就被破坏了。

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- Bootstrap -->
    <link href="inc/bootstrap.css" media="screen" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->

CSS

<style type="text/css">

    #under-header {
        height: 250px;
    }

    #screenshot {
        margin-top: -150px;
        text-align:  center;
    }

    #features {
        height: 200px;
    }

    #margin-50 {
        margin-top: 50px;
    }

    #margin-100 {
        margin-top: 50px;
    }

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

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}

</style>

</head>

HTML

<body>
    <div class="container-fluid">
    <div id="wrap">
            <div class="row-fluid">

        <div class="col-md-10 col-md-offset-1" id="margin-100">
                <h2>Title</h2>
                <div class="well"></div>
        </div>

        <div class="col-md-10 col-md-offset-1">
                <h2>Title</h2>
                <div class="well"></div>
        </div>

        <div class="col-md-10 col-md-offset-1">
                <h2>Title</h2>
                <div class="well"></div>
        </div>

         <div class="col-md-10 col-md-offset-1">
                <h2>Title</h2>
                <div class="well text-center">
                    <p></p>
                    <a class="btn btn-primary" href="#">Link</a>
                </div>
        </div>


    </div>
<div id="push"></div>
</div></div>
    <footer id="footer">
     <div class="row-fluid">

                <h2>IF YOUR DELETE THIS THE FOOTER IS RUNINED</h2>
                <div class="well text-center">
                    <p></p>
        </div>
        </div>
        </footer>
</body>
</html>

【问题讨论】：

你能提供一个小提琴吗？我在这里一切正常：jsfiddle.net/MgcDU/7086
jsfiddle.net/MgcDU/7088
在 jsfiddle 上似乎可以正常工作，但在我的文件上却不行！
只是路过，但是您使用的是哪个版本的 twitter bootstrap？因为虽然“col-”确实在 bootstrap 3 中替换了“span”，但它不再使用“row-fluid”，而只使用“row”，除非您创建自己的 css 类以它命名，cmiiw :)

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

当我将它放入 sublime 并重新缩进时，我发现了一个额外的结尾 </div>。我不确定您是否想要主容器中的页脚，但这对我有用。不过，我对引导程序不太熟悉。

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <!-- Bootstrap -->
    <link href="inc/bootstrap.css" media="screen" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->

<style type="text/css">

    #under-header {
        height: 250px;
    }

    #screenshot {
        margin-top: -150px;
        text-align:  center;
    }

    #features {
        height: 200px;
    }

    #margin-50 {
        margin-top: 50px;
    }

    #margin-100 {
        margin-top: 50px;
    }

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

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}

</style>

</head>
<body>
    <div class="container-fluid">
      <div id="wrap">
        <div class="row-fluid">

          <div class="col-md-10 col-md-offset-1" id="margin-100">
            <h2>Title</h2>
              <div class="well">
              </div>
          </div>

          <div class="col-md-10 col-md-offset-1">
            <h2>Title</h2>
            <div class="well">
            </div>
          </div>

          <div class="col-md-10 col-md-offset-1">
            <h2>Title</h2>
            <div class="well">
            </div>
          </div>

         <div class="col-md-10 col-md-offset-1">
            <h2>Title</h2>
            <div class="well text-center">
              <p>testing</p>
              <a class="btn btn-primary" href="#">Link</a>
            </div>
        </div>
      </div>
      <div id="push">
      </div>

    <footer id="footer">
    <div class="row-fluid">
      <div class="well text-center">
      <p>sdfdsdsfsd</p>
      </div>
    </div>
  </footer>
 </div>
</body>
</html>

【讨论】：