djangoでwebサイトの制作を始めたのですが、web上に表示するときに小さくなってしまいます。対処方法がわかる方は、おアドバイスをお願いいたします。
col-md-8に変更しスペースをなくしたのですが結果は同じでした。
class = "row my-4"をclass = "row"に変更しても変わりませんでした。
html
1{% extends "app/base.html" %} 2 3{% block content %} 4 5<div class="row my-4"> 6 <div class="col -md-8"> 7 {% for post in post_data%} 8 <div class = "card md-4"> 9 <div class="card-body"> 10 <h2 class="card-title">{{post.title}}</h2> 11 <p class ="card-text">{{post.content|truncatechars:100}}</p> 12 <div class="btn btn-warning ">詳細</div> 13 </div> 14 <div class="card-footer text-muted"> 15 {{post.creaetd|date}}by{{ post.author }} 16 </div> 17 <a href="" class="stretched-link"></a> 18 </div> 19 {% endfor %} 20 </div> 21 22 <div class="col-md-4"> 23 <div class="card"> 24 <h5 class ="card-header">このチュートリアルについて</h5> 25 <div class="card-body"> 26 <p>ステップ1</p> 27 <p class = "mb-0"> 28 初めてのdjango 29 </p> 30 </div> 31 </div> 32 </div> 33</div> 34 35{% endblock %} 36
html
1{% load static %} 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="utf-8"> 6 <meta name = "viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- BootstrapのCSS読み込み --> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 9 <link rel="stylesheet" href="{%static 'css/style.css' %}" 10 <title>ブログチュートリアル</title> 11</head> 12<body> 13 <nav class = "navber navber-expand-lg navber-dark bg-dark"> 14 <div class = "container"> 15 <a class="navber-brand" href="/">ブログ</a> 16 <ul class = "navber-nav ml-auto"> 17 <li class="nav-item"> 18 <a class="nav-link" href="/">ホーム</a> 19 </li> 20 {% if user.is_authenticated %} 21 <li class="nav-item"> 22 <a class="nav-link" href="/">投稿</a> 23 </li> 24 <li class="nav-item"> 25 <a class="nav-link" href="/">ログアウト</a> 26 </li> 27 {% else %} 28 <li class="nav-item"> 29 <a class="nav-link" href="/">サインアップ</a> 30 </li> 31 <li class="nav-item"> 32 <a class="nav-link" href="/">ログイン</a> 33 </li> 34 {% endif %} 35 </ul> 36 </div> 37 </nav> 38 39 <main> 40 <div class="container"> 41 {% block content%} 42 {% endblock %} 43 </div> 44 </main> 45 46 <footer class ="py-2 bg-dark"> 47 <p class="m-0 text-center text-white">Copyright © Django startup 2020</p> 48 <footer> 49 50 {% block extra_js %} 51 {% endblock %} 52</body> 53</html>
css
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5 } 6 7body{ 8 background: #F1F1F1; 9 display: flex; 10 flex-flow: column; 11 margin-left: 100vh; 12 13} 14 15main{ 16 flex: 1; 17}
回答2件
あなたの回答
tips
プレビュー