Question

我在Stack Overflow上看过其中的一些，但是问到的问题并没有找到解决我问题的答案。请记下我的代码，然后将其标记下来或将其标记为副本。

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

页脚不在{% 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">  <link href="{% static "myblog.css" %}" rel="stylesheet">   {% 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">Patch's Soapbox</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©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>  <script src="{% static "ie10-viewport-bug-workaround.js" %}"></script> {% render_block "js" %} </body>，我已经越过填充，看看是否有帮助。这些是作为以前在Stack Overflow上发布的问题的答案而出现的问题。

我留下的是一个从屏幕左边开始大约一英寸的页脚，似乎与博客标题一致。有谁知道可能导致这种情况的原因？

到目前为止，我已经在Chrome和Edge中检查了这一点，两者都提出了缩进。

这是HTML：

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;
}

CSS：

{{1}}

Answer 1

我发现了这个问题。我需要使用＆＃34;容器流体＆＃34;类，而不是＆＃34;容器＆＃34;类。

这增加了容器的宽度，与设备一致。

然后我必须使用以下命令删除bootstrap的默认填充：

.container-fluid{margin:0 auto}

页脚不会延伸到屏幕边缘 - 不会重复

1 个答案: