Question

我做了一个简单的页面来审查带有一些图标的视频，以及底部的页脚。我添加了页脚类引导程序，但我仍然没有在不同的屏幕上看到同一个地方的页脚

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/full.css" type="text/css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">


</head>
<body class="full">
<div class="container">


<br>

<p class="text-center" id="paragraph">Please Make Sure Your Sound Is Turned Up!  Please wait up to 10 seconds for this video to load.  Thank You!</p>
<center>
<div class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
<i class="fa fa-facebook-official" aria-hidden="true" id="face"></i>
    <i class="fa fa-twitter" aria-hidden="true" id="twitter"></i>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="mybutton">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="">
<input type="image" src="images/order.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
</div>

<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
</div>
<div class="footer">
<nav class="navbar navbar-default" role="navigation">
        <div class="collapse navbar-collapse navbar-ex1-collapse" id="footer">
          <ul class="nav navbar-nav">
            <li><a href="disclaimer.htm">Disclaimer</a></li> 
      <li><a href="earnings.htm">Earnings</a></li>
      <li><a href="privacy.htm">Privacy</a></li>
      <li><a href="tos.htm">Tos</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      </div>
</body>

</html>

这是CSS：

.full {
    background: url('../images/bg2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

#border{
     max-height: 400px;
     align:center;
     border-style: solid;
    border-color: #ff0000
}
#paragraph{
    font-weight: bold;
    font-size: 30px;
    color:red;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}


#face {
  color:#3b5998;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 2.5em;
}
#twitter {
  color:#0084b4;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 2.5em;
}

页脚通过更改屏幕大小来改变它的位置的问题。

Answer 1

您在页脚中使用默认引导程序导航而类collapse表示导航将在较低分辨率下隐藏，因为引导程序会添加响应式菜单。

因此，如果您希望在所有分辨率上看到导航，请从中移除collapse类。像这样：

<div class="navbar-collapse navbar-ex1-collapse" id="footer">

<强>更新

对于页脚修复检查示例https://jsfiddle.net/xuhL8v4v/

Answer 2

在脚本中删除div并将脚本放在页脚下面，以便最终代码看起来像这样

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/full.css" type="text/css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">


</head>
<body class="full">
<div class="container">


<br>

<p class="text-center" id="paragraph">Please Make Sure Your Sound Is Turned Up!  Please wait up to 10 seconds for this video to load.  Thank You!</p>
<center>
<div class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
<i class="fa fa-facebook-official" aria-hidden="true" id="face"></i>
    <i class="fa fa-twitter" aria-hidden="true" id="twitter"></i>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" id="mybutton">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="">
<input type="image" src="images/order.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</center>
</div>



<div class="footer">
<nav class="navbar navbar-default" role="navigation">
        <div class="collapse navbar-collapse navbar-ex1-collapse" id="footer">
          <ul class="nav navbar-nav">
            <li><a href="disclaimer.htm">Disclaimer</a></li> 
      <li><a href="earnings.htm">Earnings</a></li>
      <li><a href="privacy.htm">Privacy</a></li>
      <li><a href="tos.htm">Tos</a></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
      </div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
</body>

</html>

＆＃13;

静态和响应式页脚引导程序

2 个答案: