如何用html和css在pyhton中一行显示3篇文章？它现在显示“最后一个打开”下的每个帖子

2024-05-11 14:58:09 发布

您现在位置：Python中文网/ 问答频道 /正文
507 3

我想像col-md-4那样显示，但它会显示最后一篇文章下面的每一篇文章。你知道吗

我试图将容器的类设置为col-md-4，但对我无效。 我可以像以前那样直接将它定义到容器中，还是应该将它定义到CSS中？ 如果你能帮助我，我将不胜感激！你知道吗

我的集装箱代码是：

<div class="content container">
    <div class="row">
        <div class="col-md-4">

    {% block content %}
        {% for post in posts %}
            <div class="post">
                <div class="date">
                    {{ post.published_date }}
                </div>
                <h1>{{ post.title }}</h1>
                <p>{{ post.text|linebreaksbr | truncatewords:50 }}</p>
                <a href="{% url 'post_detail' pk=post.pk %}" class="btn btn-default">Weiterlesen</a>

            </div>
        {% endfor %}
    {% endblock %}

我还有一个base.py

{% load static %}

<html>
    <head>
        <title>Code Reminder</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div class="page-header">
        <h1><a href="/">Code Reminder</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

</html>

我的css看起来像这样，也许我应该把它定义成css？你知道吗

blog.css

.page-header {
    background-color: black;
    margin-top: 0;
    padding: 20px 20px 20px 40px;
}


.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 36pt;
    text-decoration: none;
}

.content {
    margin-left: 40px;
}

h1, h2, h3, h4 {
    font-family: 'Ŕoboto', cursive;
}

.date {
    color: #828282;
    font-family: cursive;
    font-size: 10px;
    font-style: normal;
}

.save {
    float: right;
}

.post-form textarea, .post-form input {
    width: 100%;
}

.top-menu, .top-menu:hover, .top-menu:visited {
    color: #ffffff;
    float: right;
    font-size: 26pt;
    margin-right: 20px;
}

.post {
    margin-bottom: 70px;
}

.post h2 a, .post h2 a:visited {
    color: #000000;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

Tags： margindivtoppagecolcontenth1post
2条回答
网友
1楼 · 编辑于 2024-05-11 14:58:09

要在列中显示文章，请使用bootsrap中的col-sm类

{% block content %}
  <div class="row">
    {% for post in posts %}
        <div class="col-sm post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h1>{{ post.title }}</h1>
            <p>{{ post.text|linebreaksbr | truncatewords:50 }}</p>
            <a href="{% url 'post_detail' pk=post.pk %}" class="btn btn-default">Weiterlesen</a>
        </div>
    {% endfor %}
  </div>
{% endblock %}

在基本模板中，保持简单

{% load static %}

<html>
    <head>
        <title>Code Reminder</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
        <link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div class="page-header">
        <h1><a href="/">Code Reminder</a></h1>
    </div>
    <div class="content container">
        {% block content %}
        {% endblock %}
    </div>
</body>

</html>

这些文档在这里；https://getbootstrap.com/docs/4.1/layout/grid/

工作示例；https://codepen.io/marksweb/pen/vMywPZ

网友
2楼 · 编辑于 2024-05-11 14:58:09

我认为您的解决方案可能是使用flexbox或grid。Flexbox是bootstrap在其大多数组件中使用的。我宁愿使用这两个惊人的技术，而不是引导。它可以让你更好地控制你的css。你知道吗

我准备了两个简单的例子，用这两个例子来说明如何实现这一点：

柔性箱：

.container {
  height: 100vh;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  background-color: red;
  height: 100px;
  width: 100px;
}

https://jsfiddle.net/s7x98rme/4/

引用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

网格：

.container {
  height: 100vh;
}

.container__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.content {
  background-color: red;
  height: 100%;
  width: 200px;
}

https://jsfiddle.net/xu57ryqd/9/

引用：https://gridbyexample.com/examples

如果你对我的回答还需要什么解释，尽管问。你知道吗

相关问题 更多 >

    编程相关推荐