0
스택 오버플로에서이 중 몇 가지를 보았습니다. 그러나 질문 한 내용이 내 문제를 해결하는 대답으로 이어지지 않습니다. 내 코드를 표시하거나 중복으로 표시하기 전에 내 코드를 살펴 보시기 바랍니다.바닥 글이 화면 가장자리까지 뻗어 있지 않습니다. 중복되지 않습니다.
"Beginning django CMS"라는 책을 통해 작업하고 있습니다. 나는 몇몇 부분이 시대에 뒤떨어져있는 것을 발견하고 있는데, 그것이 문제일지도 모른다. 웹 디자인을 처음 접했기 때문에 말하기가 힘듭니다.
바닥 글은 <div>에 없으므로 패딩을 통해 도움이되는지 확인했습니다. 그것들은 이전에 스택 오버 플로우에 게시 된 질문에 대한 답변으로 떠오르는 문제 유형입니다.
화면 왼쪽에서 약 1 인치에서 시작하여 블로그 제목과 일치하는 것으로 보이는 바닥 글이 남아 있습니다. 아무도 이것이 무엇을 일으키는 지 알고 있습니까?
Chrome 및 Edge에서이 기능을 지금까지 체크했는데 모두 들여 쓰기가 있습니다.
{% 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">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>
<!-- 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;
}