Как отобразить 3 сообщения подряд в Pyhton с HTML и CSS?Теперь он отображает каждое сообщение под последним - PullRequest
Новая
       0

Как отобразить 3 сообщения подряд в Pyhton с HTML и CSS?Теперь он отображает каждое сообщение под последним

0 голосов
/ 08 апреля 2019

Я хочу отобразить как 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;
}

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Я думаю, что ваше решение может быть с использованием flexbox или grid. Flexbox - это то, что Bootstrap использует в большинстве своих компонентов. Я предпочел бы использовать эти две удивительные технологии, чем начальную загрузку. Это дает вам больше контроля над вашим CSS.

Я подготовил два простых примера, используя оба из них, чтобы показать вам, как этого добиться:

flexbox: 

.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

Если вам нужны какие-либо дополнительные объяснения относительно моего ответа, не стесняйтесь спрашивать.

0 голосов
/ 09 апреля 2019

Для отображения ваших сообщений в столбцах используйте класс col-sm из bootsrap; 

{% 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...