取决于屏幕宽度，Python连续连续多个div

Question

您好，亲爱的stackoverflow社区， 因为这是我第一次在这里问问题，如果我错过任何必要的信息，请原谅。

我通过反向工程以下网站来开始学习Python和Framework Django：

thieve.co作为练习。

现在，我遇到了以下问题：

我所有上传的文章（显示为卡片（引导程序））会自动排列在彼此之间。我实际上想要做的是将它们以行显示，其中卡的数量取决于屏幕大小。

views.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})

urls.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]+'...'

models.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">
          &copy; 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 %}

styles.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>

我希望这是您需要的所有信息，我非常感谢我能获得的每一个帮助。

Answer 1

我弄清楚了如何使它工作：

我删除了包含网站主要部分的超大型飞机，并用一个容器液体代替了它。然后，我将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">
          &copy; 2018 Trenderist<br>
        </div>

    </footer>

{% endblock %}