python - 取决于屏幕宽度的Python连续多个div
问题描述
你好亲爱的stackoverflow社区，因为这是我第一次在这里问问题，如果我错过了任何必要的信息，请原谅我。
我开始通过对以下网站进行逆向工程来学习 Python 和框架 Django：
thieve.co 作为一种做法。
现在我遇到了以下问题：
我上传的所有显示为卡片（引导程序）的文章都会自动排列在彼此下方。我真正想做的是它们按行显示，其中卡片的数量取决于屏幕大小。
视图.py：
from django.shortcuts import render,redirect
from .models import Article
from django.http import HttpResponse
from django.contrib.auth.decorators import login_required
from articles import forms
def article_list(request):
articles = Article.objects.all().order_by('date')
return render(request,'articles/article_list.html',{'articles':articles})
def article_detail(request,slug):
#return HttpResponse(slug)
article = Article.objects.get(slug=slug)
return render(request,'articles/article_detail.html',{'article': article})
@login_required(login_url="/accounts/login/")
def article_create(request):
if request.method == 'POST':
form = forms.CreateArticle(request.POST, request.FILES)
if form.is_valid():
instance = form.save(commit=False)
instance.author = request.user
instance.save()
return redirect('articles:list')
else:
form = forms.CreateArticle()
return render(request,'articles/article_create.html',{'form':form})
网址.py：
from django.urls import path
from articles import views
app_name='articles'
urlpatterns = [
path('',views.article_list,name="list"),
path('create/', views.article_create,name="create"),
path('<slug:slug>',views.article_detail, name="detail"),
]
models.py:
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class Article(models.Model):
title = models.CharField(max_length=100)
slug = models.SlugField()
body = models.TextField()
date = models.DateTimeField(auto_now_add=True)
thumb = models.ImageField(default='default.png',blank=True,upload_to='../media/')
author = models.ForeignKey(User, default=None, on_delete=models.CASCADE,)
def __str__(self):
return self.title
def snippet(self):
return self.body[:50]+'...'
模型.py：
from django import forms
from articles import models
class CreateArticle(forms.ModelForm):
class Meta:
model = models.Article
fields = ['title','body','slug','thumb']
article_list.html：
{% extends 'base_layout.html' %}
{% block content %}
<div class="site-header jumbotron jumbotron-fluid" id="jumbo-head">
<div class="container">
<h3>JEDEN TAG DIE BESTEN ENTDECKUNGEN IM NETZ</h3>
<p class="lead">zusammengestellt von Kreativen</p>
<p>Werde auch du ein Trenderist!</p>
<a href="{% url 'accounts:signup'%}" class="btn btn-lg btn-success">Trenderist werden</a>
<!--
<ul class="list-inline" id="filter">
<li class="list-inline-item filter-border"> Latest </li>
<li class="list-inline-item filter-border"> Trenderist Picks </li>
<li class="list-inline-item filter-border"> Trending </li>
<li class="list-inline-item filter-border"> Most Popular </li>
<li class="list-inline-item filter-border"> Price </li>
</ul>-->
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="content-area-box">
<div class="content-area" >
<aside class="sidebar-area" role="complementary">
<nav class="side-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">
</li>
<li class="menu-item">
</li>
<li class="menu-item">
<a href="javascript:;">Alle Produkte</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Herren</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Damen</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Hauswaren</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Elektronik</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Kinder</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Musik</a>
</li>
<li class="menu-item">
<a href="javascript:;">Sport & Freizeit</a>
</li>
<li class="menu-item">
<a href="javascript:;">Bürobedarf</a>
</li>
<li class="menu-item">
<a href="javascript:;">Fotografie</a>
</li>
<li class="menu-item">
<a href="javascript:;">Spielzeuge</a>
</li>
<li class="menu-item">
<a href="javascript:;">Baby</a>
</li>
<!-- /.menu-item -->
</ul><!-- /.menu -->
</nav><!-- #site-navigation -->
</aside><!-- #secondary -->
<main class="site-main" role="main">
{% for article in articles %}
<div class="articles col-12">
<div class="article col-4">
<div class="card-group">
<div class="card card-size">
<a href="{% url 'articles:detail' slug=article.slug %}"><img src="{{article.thumb.url}}" alt=""> </a> <hr>
<h6>{{article.title}}</h6><hr>
<img src="../static/likes.png" alt="">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard" class="img-fluid card">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="lightbox" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
{% for article in articles %}
<div class="article">
<h6><a href="{% url 'articles:detail' slug=article.slug %}">{{article.title}}</a></h6>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
-->
</main>
</div>
<footer id="main-footer">
<div class="row footer">
<div class="col-sm-4 mehr" >
<h6>Mehr über Trenderist</h6>
<ul class="list-unstyled">
<li><a href="#">Über Uns</a> </li>
<li><a href="#">Karriere bei Trenderist</a> </li>
<li><a href="#">Unternehmensverantwortung</a> </li>
<li><a href="#">Investoren</a> </li>
</ul>
</div>
<div class="col-sm-4">
<h6>Hilfe</h6>
<ul class="list-unstyled">
<li><a href="#">Kundenservice</a> </li>
<li><a href="#">Mein Trenderist</a> </li>
<li><a href="#">Datenschutz</a> </li>
<li><a href="#">AGB</a> </li>
<li><a href="#">Impressum</a> </li>
<li><a href="#">FAQ</a> </li>
<li><a href="#">Über Cookies</a> </li>
</ul>
</div>
<div class="col-sm-4">
© 2018 Trenderist<br>
</div>
</footer>
{% endblock %}
article_detail.html：
{% extends 'base_layout.html' %}
{% block content %}
<div class="create-article">
<h2>Create Article</h2>
<form class="site-form" action="{% url 'articles:create' %}" method="post" enctype="multipart/form-data ">
{% csrf_token %}
{{form}}
<input type="submit" value="Create">
</form>
</div>
<script src="/static/slugify.js">
</script>
{% endblock %}
样式.css：
html,body{
height: 100%;
width:100%;
}
body{
background-color: gray;
text-rendering: optimizeLegibility;
}
/*.card-group{
padding: 20px 20px 20px 20px;
}
.card .card-size{
margin: 0 20px 0 20px;
}*/
.content-area {
display: flex;
bottom:0;
}
#content-area-box{
background-color: gray;
top:0;
margin-bottom:0;
}
img{
max-width: 100%;
}
#jumbo-head{
text-align: center;
align-items: center;
justify-content: center;
background-color: #000;
color: #fff;
margin-bottom: 0;
}
#filter{
border: 10px solid white;
border-radius: 10px;
padding: 15px;
color: black;
background-clip: border-box;
background-color: white;
width: 50%;
}
.site-main {
width: 75%;
margin-top: 20px;
}
.sidebar-area {
margin-top:0;
position: relative;
width: 290px;
}
.side-navigation{
background-color: gray;
}
.side-navigation.fixed {
overflow: hidden;
position: fixed;
top: 130px;
width: 290px;
}
.side-navigation.bottom {
position: absolute;
bottom: 0;
top: auto;
width: 290px;
}
.side-navigation .menu {
padding-top: 15px;
list-style-type: none;
}
.side-navigation .menu-item {
position: relative;
}
.side-navigation .menu-item:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
background-color: #5cb85c;
transition: width .3s ease-in;
}
.side-navigation .menu-item:hover:before {
width: 100%;
}
.side-navigation .menu-item a {
color: #fff;
text-decoration: none;
position: relative;
display: block;
padding: 18px 50px;
}
footer {
margin-top:0;
width: 100%;
background-color: #000;
}
#main-footer{
color: white;
font-size: 0.8rem;
}
#search-width input[type=text]{
width: 430px !important;
}
#main-footer h6{
color: #fff;
}
#main-footer a{
padding-top: 20px;
color:#fff;
}
#trend-filter{
background-color: white;
color:
}
.footer{
padding-top:20px;
}
.article-detail .article img{
max-width: 40%;
}
.site-form{
margin-top:60px;
padding-left: 50px;
}
.tester h1{
text-align:center;
padding-top: 40px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
.tester{
padding: 50px;
color: black;
}
.site-form input, .site-form textarea{
display:block;
margin: 20px 0 0 0;
}
.copyright{
bottom:0;
align-items: center;
}
.helptext, helptext ul{
margin: 0 auto 20px;
color: #000;
font-size: 0.9em;
display: block;
}
.errorlist li{
padding: 10px;
list-style-type: none;
border: 1px solid #ff5722;
color: #ff5722;
margin: 10px 0;
}
.errorlist{
padding: 0;
}
base_layout.html：
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Trenderist - JEDEN TAG DIE BESTEN ENTDECKUNGEN IM NETZ</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../templates/base_layout.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top" style="background-color: #000;">
<a href="{% url 'home' %}" class="navbar-brand col-sm-4"><img src="{% static 'Logo-weiß.png'%}" alt="trenderistlogo" height="60"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse form-inline" id="navbarSupportedContent">
<li class="nav-item dropdown">
<div class="nav-item">
<form class="form-inline my-2 my-lg-0">
{%csrf_token%}
<input class="form-control mr-sm-2 col-sm-s" id="search-width" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 " type="submit">Search</button>
</form>
</div>
</li>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<div class="btn-group">
<li class="nav-item">
<form class="btn-pill" action="{% url 'accounts:logout' %}" method="post">
{% csrf_token %}
<button class="btn btn-light" type="submit">Logout</button>
</form>
</li>
<li><a href="{% url 'articles:create' %}" class="btn btn-success">Produkt hochladen</a></li>
{% else %}
<li class="nav-item"><a class="btn btn-pill btn-success" href="{% url 'accounts:login'%}">Login</a></li>
{% endif %}
</div>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
我希望这是您需要的所有信息，我非常感谢我能得到的每一个帮助。
解决方案
我想出了如何让它工作：
我删除了包含网站主要部分的 jumbotron 并用容器流体替换它。然后我将 for 循环包装在一个行 div 中并添加了一些引导 cols。
article_list.html：
{% extends 'base_layout.html' %}
{% block content %}
<div class="site-header jumbotron jumbotron-fluid" id="jumbo-head">
<div class="container">
<h3>JEDEN TAG DIE BESTEN ENTDECKUNGEN IM NETZ</h3>
<p class="lead">zusammengestellt von Kreativen</p>
<p>Werde auch du ein Trenderist!</p>
<a href="{% url 'accounts:signup'%}" class="btn btn-lg btn-success">Trenderist werden</a>
<!--
<ul class="list-inline" id="filter">
<li class="list-inline-item filter-border"> Latest </li>
<li class="list-inline-item filter-border"> Trenderist Picks </li>
<li class="list-inline-item filter-border"> Trending </li>
<li class="list-inline-item filter-border"> Most Popular </li>
<li class="list-inline-item filter-border"> Price </li>
</ul>-->
</div>
</div>
<div class="container-fluid" id="content-area-box">
<div class="content-area" >
<aside class="sidebar-area" role="complementary">
<nav class="side-navigation" role="navigation">
<ul class="menu">
<li class="menu-item">
</li>
<li class="menu-item">
</li>
<li class="menu-item">
<a href="javascript:;">Alle Produkte</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Herren</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Damen</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Hauswaren</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Elektronik</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Kinder</a>
</li><!-- /.menu-item -->
<li class="menu-item">
<a href="javascript:;">Musik</a>
</li>
<li class="menu-item">
<a href="javascript:;">Sport & Freizeit</a>
</li>
<li class="menu-item">
<a href="javascript:;">Bürobedarf</a>
</li>
<li class="menu-item">
<a href="javascript:;">Fotografie</a>
</li>
<li class="menu-item">
<a href="javascript:;">Spielzeuge</a>
</li>
<li class="menu-item">
<a href="javascript:;">Baby</a>
</li>
<!-- /.menu-item -->
</ul><!-- /.menu -->
</nav><!-- #site-navigation -->
</aside><!-- #secondary -->
<main class="site-main" role="main">
<div class="row">
{% for article in articles %}
<div class="article col-lg-4 col-md-6 col-sm-12 col-12">
<div class="card-group">
<div class="card card-size">
<a href="{% url 'articles:detail' slug=article.slug %}"><img src="{{article.thumb.url}}" alt=""> </a> <hr>
<h6>{{article.title}}</h6><hr>
<img src="../static/likes.png" alt="">
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!--
<div class="row">
<div class="col-lg-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard" class="img-fluid card">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="lightbox" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-group">
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
<button type="button" class="btn btn-success-outline" name="button" data-toggle="modal" data-target="#myModal">learn more</button>
</div>
</div>
<div class="card card-size">
<img src="../static/spoon.jpg" alt="a chalkboard">
<div class="card-block">
{% for article in articles %}
<div class="article">
<h6><a href="{% url 'articles:detail' slug=article.slug %}">{{article.title}}</a></h6>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
-->
</main>
</div>
<footer id="main-footer">
<div class="row footer">
<div class="col-sm-4 mehr" >
<h6>Mehr über Trenderist</h6>
<ul class="list-unstyled">
<li><a href="#">Über Uns</a> </li>
<li><a href="#">Karriere bei Trenderist</a> </li>
<li><a href="#">Unternehmensverantwortung</a> </li>
<li><a href="#">Investoren</a> </li>
</ul>
</div>
<div class="col-sm-4">
<h6>Hilfe</h6>
<ul class="list-unstyled">
<li><a href="#">Kundenservice</a> </li>
<li><a href="#">Mein Trenderist</a> </li>
<li><a href="#">Datenschutz</a> </li>
<li><a href="#">AGB</a> </li>
<li><a href="#">Impressum</a> </li>
<li><a href="#">FAQ</a> </li>
<li><a href="#">Über Cookies</a> </li>
</ul>
</div>
<div class="col-sm-4">
© 2018 Trenderist<br>
</div>
</footer>
{% endblock %}
推荐阅读
- vim - 是否可以将特定标签文件添加到 vim 中的特定窗口/缓冲区？
- django - 有没有办法在开发过程中在移动设备上加载 django 网站？
- azure-api-management - API Management + App Gateway 用于托管面向 Internet 的 API 的用例
- swiftui - SwiftUI Negative Padding Z 顺序
- c++ - 如何使用旧的 stdlib 和 libc 在旧的 linux 发行版中构建 C++17 应用程序？
- flutter - 因此，firebase_core ^0.7.0 与 cloud_firestore ^0.14.0 不兼容
- matlab - 包装 plot() 函数以使用 varargin
- angular - 在 Angular 和 RxJS 中的 http 调用后添加数据转换步骤
- javascript - 在反应中用滑块填充输入类型范围
- algorithm - 仅遍历序列的函数的跨度？