MU
Maciej UrmańskiТам. 28, 2021, 6:06 Т.Ж.
Django template forloop counter change design after x article
Hi, I try to achieve something like this:
But my code doesnt work. I mean, work, but elements just show as broken like this:
My code:
<div class="trending position-relative pb-65"> <div class="container"> <div class="row"> {% for article in healtharticles %} <div class="col-lg-4 col-md-12 mb-4 mb-lg-0"> <!-- News block --> {% if forloop.first %} <div> <!-- Featured image --> <div class="bg-image hover-overlay shadow-1-strong ripple rounded-5 mb-4" data-mdb-ripple-color="light"> <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" /> <a href="#!"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div> </a> </div> <!-- Article data --> <div class="row mb-3"> <div class="col-6"> <a href="" class="text-info"> <i class="fas fa-plane"></i> Travels </a> </div> <div class="col-6 text-end"> <u> 15.07.2020</u> </div> </div> <!-- Article title and description --> <a href="" class="text-dark"> <h5>This is title of the news</h5> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed id nihil magni, sint vero provident esse numquam perferendis ducimus dicta adipisci iusto nam temporibus modi animi laboriosam? </p> </a> {% else %} <hr /> <!-- News --> <a href="" class="text-dark"> <div class="row mb-4 border-bottom pb-2"> <div class="col-3"> <img src="https://mdbootstrap.com/img/new/standard/city/041.jpg" class="img-fluid shadow-1-strong rounded" alt="" /> </div> <div class="col-9"> <p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p> <p> <u> 15.07.2020</u> </p> </div> </div> </a> {% endif %} </div> <!-- News block --> </div> {% endfor %} </div> </div> </div>
Maybe You have idea how to do this corectly.
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!
Пікірлер
Г
- Геній
- Қыр. 13, 2024, 12:46 Т.Қ.
C++ - Тест 001. Первая программа и типы данных
- Нәтиже:66ұпай,
- Бағалау ұпайлары-1
t
- torgaev_2024
- Қыр. 8, 2024, 6:20 Т.Ж.
C++ - Тест 001. Первая программа и типы данных
- Нәтиже:33ұпай,
- Бағалау ұпайлары-10
Соңғы пікірлер
Linux жүйесінде файлдарды қалай көшіруге болады Задумывались когда-нибудь о том, как мы привыкли доверять свои вещи службам грузоперевозок? Сейчас такие услуги стали неотъемлемой частью нашей жизни, особенно когда речь идет о переездах между …
ВР
Linux жүйесінде файлдарды қалай көшіруге болады Screenshot_20240802-065123.png
Влад РусоковТам. 2, 2024, 1:47 Т.Ж.
QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Qt Linux - Сабақ 001. Linux астында Autorun Qt қолданбасы как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Qt WinAPI - Сабақ 007. Qt ішінде ICMP Ping арқылы жұмыс істеу Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
Анатолий КононенкоАқп. 5, 2024, 1:50 Т.Ж.
Енді форумда талқылаңыз
Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
BlinCTМаусым 25, 2024, 1 Т.Ж.
BlinCTМамыр 5, 2024, 5:46 Т.Ж.
Evgenii LegotckoiМамыр 2, 2024, 2:07 Т.Қ.
Hi!
You've got an error in markup
the first div after {% if forloop.first %} is closing after {% endif %}. You should put openning div outside of forloop or make in every if-branch. (I prefer the second way)
so, you can try this: