个人中心
gpt4 book ai didi

html - Bootstrap 页脚不在任何页面的底部

转载 作者：行者123 更新时间：2023-11-28 02:38:16 24 4
gpt4 key购买 nike

我在 Stack Overflow 上看到过其中一些问题，但所提出的问题并没有得到解决我的问题的答案。请花时间检查我的代码，然后再将其标记或标记为重复。

我正在阅读一本名为“Beginning django CMS”的书。我发现有几个部分已经过时了，这可能就是这里的问题。这对我来说很难说，因为我是网页设计的新手。

页脚不在 <div> 中，我已经检查了填充以查看是否有帮助。这些问题是对之前发布在 Stack Overflow 上的问题的回答。

我留下了一个页脚，它从屏幕底部开始一英寸结束。有谁知道这可能是什么原因造成的？

到目前为止，我已经在 Chrome 和 Edge 中检查过这个问题，都提出了缩进。

这是 HTML:

{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
    <meta name = "viewport" content="width=device-width", initial-scale=1>

    <link rel="icon" href="favicon.ico">

    <title>{% block title %}MyBlog Title{% endblock title %}</title>

    <link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- MyBlog custom styles -->
    <link href="{% static "myblog.css" %}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    {% render_block "css" %}
</head>
<body>
    {% cms_toolbar %}
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href=""><img src="{% static "" %}"/></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    {% show_menu 0 1 0 100 "menu.html" %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="blog-header">
            <h1 class="blog-title">(Now a banner)</h1>
            <p class="lead blog-description">The political system is broken; it could do with a Patch</p>
        </div>
        {% block content %}{% endblock content %}
    </div>

    <footer class="footer">
     <div class="container">
      <p class="text-muted">{% block footer %}My Blog&copy;2015{%endblock footer%}</p>
     </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
    <script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>

    {% render_block "js" %}
</body>

还有 CSS:

html {
    position : relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family : Georgia, "Times New Roman", Times, serif;
    color #555;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
    font-weight: normal;
    color: #333;
}
.footer {
    position: absolute;
    margin-left : 0px
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
}

.blog-title {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 28px;
    font-weight: normal;
}
.blog-description{
    font-size: 20px;
    color: #999;
}
.sidebar-module{
    padding: 15px;
    margin: 0 -15px 15px;
}
.sidebar-module-inset {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
    margin-bottom: 0;
}
.pager {
    margin-bottom: 60px;
    text-align: left
}
.pager > li > a {
    width: 140px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 30px;
}
.blog-post{
    margin-bottom: 60px;
}
.blog-post-title{
    margin-bottom: 5px;
    font-size: 40px;
}
.blog-post-meta {
    margin-bottom: 20px;
    color : #999;
}
body > container {
    padding: 0px 0px 0;
}
.container .text-muted {
    margin: 20px 0;
}
.footer > .container {
    padding-right: 15px;
    padding-left: 0;
}
.row {
    margin-right: 0px!important;
}

最佳答案

问题在行中

 <h1 class="blog-title">Patch's Soapbox</h1>

你可以看出问题是什么，因为超过这一点的所有文本都是红色的。

Patch 中的单引号告诉 HTML 在此之后的所有内容都是字符串。您需要使用以下方式给我们更换:

<h1 class="blog-title">Patch&#39;s Soapbox</h1>

关于html - Bootstrap 页脚不在任何页面的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47308941/

24 4 0
文章推荐： javascript - 如何使用 jQuery 选择 child 和自己？
文章推荐： html - CKEditor Source Dialog 显示未存储在数据库中的 HTML 实体
文章推荐： javascript - 触发 Controller 显示 View
文章推荐： c++ - 错误1错误C1083:无法打开包含文件:'exercises.h':没有此类文件或目录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com