Нужно перенести div в другой ряд

Question

Помогите, нужно перенести TestNews4 в другой ряд

html:

{% load HandF %}
{% load pagination %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Головна сторінка</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/Site/style.css">
</head>
<body>
    {% header %}
    <h5>Всі новини:</h5>
    <div class="news-list">
    {% for news in news_list %}
    <div class="col-md-6 news">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <h3 class="mb-0">{{ news.title }}</h3>
          <div class="mb-1 text-body-secondary time-up-and-cr">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
          <p class="card-text mb-auto">{{ news.description|slice:":70" }}</p>
          <a href="{% url 'news-detail' slug=news.slug %}" class="icon-link gap-1 icon-link-hover stretched-link">
            Прочитати повністю ->
          </a>
        </div>
      </div>
    </div>
    {% endfor %}
    </div>
    <ul class="button-slider">
    {% if page_obj.has_previous %}
    <a href="{% get_page_url request 'page' page_obj.previous_page_number %}">
    <button class="pagination-btn btn btn-primary d-inline-flex align-items-center" type="button">
        <
    </button></a>
    {% endif %}
    <button class="pagination-btn current-page btn btn-primary d-inline-flex align-items-center" type="button">
        {{ page_obj.number }}
    </button>
    {% if page_obj.has_next %}
    <a href="{% get_page_url request 'page' page_obj.next_page_number %}">
    <button class="pagination-btn btn btn-primary d-inline-flex align-items-center" type="button">
        >
    </button></a>
    {% endif %}
    </ul>

    {% footer %}
</body>
</html>

css:

body{
    margin-left: 10px;

    .news-list{
        vertical-align: top;
        display: flex;
        .news{
            width: 33%;
            padding: 10px;
            box-sizing: border-box;
            max-height: 200px;
        }


    }
    .time-up-and-cr{
        font-size: 10px
    }
    header{
        background-color: yellow;
        margin-left: -20px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
    }

    footer{
        background-color: yellow;
        margin-left: -20px;
    }

    .welcome-to{
        text-align: center;
        margin-left: -20px;
    }
}

Answer 1

Зачем вы лезете в циклы, препроцессоры и стороннее библиотеки, если вы не понимаете основ? Ваша проблема решается добавлением CSS свойства .news-list{flex-wrap:wrap;} разберитесь сначала с базовой версткой.

Answer 2

Вы используете flexbox Значит нужно добавить к контейнеру, где содержатся карточки с новостями flex-wrap: wrap. Это свойство позволяет гибко перенести те карточки, которые не влезают, на следующую строку. Так вы избавитесь от скрола. Для отступов можно будет использовать gap.

Answer 3

col-md-6 не нужно в news
Эта строчка не нужна вообще, все стили, которые применили к ней, примените к news - div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
2.5) Эта строчка тоже не нужна - div class="col p-4 d-flex flex-column position-static"
Используем display:grid для news-list. Он тут подходит лучше чем flex
классом col-md-6 вы говорите ему, что он будет в две строчки до разрешения 768px, но вместо этого можете написать @media и переопределить в news-list grid-template-columns.
P.S. Понятное дело вы пытаетесь сделать всё на классах, но и их тоже нужно правильно использовать, а иначе потом будете копаться в коде и искать, почему ваши стили не применяются, а они на самом деле перебиваются вашим классом, который вы вставили в HTML. И @media поставил 400px что бы было видно, что в две строчки, но должно быть 768 вроде.

.news {
  border-radius: 5px;
  border: 1px solid gray;
  padding: 15px;
  box-shadow: 2px 2px 5px 5px grba(0,0,0,0.5);
  background-color: yellow;
}

.news-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
h3 {
  margin: 0;
}

@media (max-width: 400px) {
  .news-list {
    grid-template-columns: 1fr;
  }
}

<div class="news-list">
    <div class="news">
          <h3 class="mb-0">{{ news.title }}</h3>
          <div class="mb-1 text-body-secondary time-up-and-cr">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
          <p class="card-text mb-auto">{{ news.description|slice:":70" }}</p>
          <a href="{% url 'news-detail' slug=news.slug %}" class="icon-link gap-1 icon-link-hover stretched-link">
            Прочитати повністю ->
          </a>
    </div>
    <div class="news">
          <h3 class="mb-0">{{ news.title }}</h3>
          <div class="mb-1 text-body-secondary time-up-and-cr">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
          <p class="card-text mb-auto">{{ news.description|slice:":70" }}</p>
          <a href="{% url 'news-detail' slug=news.slug %}" class="icon-link gap-1 icon-link-hover stretched-link">
            Прочитати повністю ->
          </a>
    </div>
    <div class="news">
          <h3 class="mb-0">{{ news.title }}</h3>
          <div class="mb-1 text-body-secondary time-up-and-cr">{{ news.created_at }} {% if news.updated_at != news.created_at %} оновлення: {{ news.updated_at }}{% endif %}</div>
          <p class="card-text mb-auto">{{ news.description|slice:":70" }}</p>
          <a href="{% url 'news-detail' slug=news.slug %}" class="icon-link gap-1 icon-link-hover stretched-link">
            Прочитати повністю ->
          </a>
    </div>
</div>

БЛОГ НА HUSL

Нужно перенести div в другой ряд

Ответы (3 шт):