0

在我看来，这是一个非常奇怪的问题。基本上，我所做的就是删除<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>
4

1 回答 1

1

当我把它放入 sublime 并重新缩进时，我发现了一个额外的 close </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>
于 2013-09-03T04:37:35.973 回答