Html 静态和响应页脚引导_Html_Css_Twitter Bootstrap

Html 静态和响应页脚引导

html css twitter-bootstrap

Html 静态和响应页脚引导,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我制作了一个简单的页面，用一些图标和底部的页脚来查看视频。我向它添加了页脚类引导，但在不同的屏幕中，我仍然看不到相同位置的页脚这是我的HTML： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"> <link rel="stylesheet" href="css/full.css" type="text

我制作了一个简单的页面，用一些图标和底部的页脚来查看视频。我向它添加了页脚类引导，但在不同的屏幕中，我仍然看不到相同位置的页脚

这是我的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>

页脚保持不变的问题是通过改变屏幕的大小来改变它的位置。

删除div，只需在脚本后面添加脚本，并将脚本放在页脚下面，最后的代码如下所示




请确保您的声音已调大！请最多等待10秒钟，以便加载此视频。谢谢大家!

在页脚中使用默认引导导航，类

折叠

意味着导航将隐藏在较低的分辨率上，因为引导会添加响应菜单

所以，如果您想查看所有分辨率上的导航，请从中删除

collapse

class。像这样：

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

更新

对于此处的页脚修复检查示例

不要使用

标记，请使用cssinstead@jakob我知道，但这不是问题的根源，我知道，这就是我刚才评论的原因<代码>在HTML5中不受支持。此外，最好是在页面末尾调用JS脚本，而不是在中间调用。在jquery调用之后，您还有一个额外的关闭

。@Cwalavice您所说的

页脚保持更改是什么意思？通过更改屏幕的大小来改变它的位置

？你在哪里看到你的页脚在什么断点上？等等。你想做什么上面提供的链接是好的。这正是我在下面的问题评论中告诉你的。这并不是问题的解决方案。我移除了折叠，现在页脚可以有各种尺寸，但底部仍然不是静态的，如下图所示：谢谢，这对我有用。你能告诉我如果需要如何使它粘吗？这是粘的。。你是说固定的吗？

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