Почему граница слева не работает для Bootstrap 5 Django?

Итак, у меня есть следующий код:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Verification Code Email</title>
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
    <style>
        .insta-icon{width:50%; float:right;}
    </style>    
</head>
<body>
    <div class = "container">
        <div class = "row">
            <div class = "col-1 offset-1 border-right">    # This one right here
                <img class = "insta-icon"src = "{% static '/images/instagram_icon.png' %}">                 
            </div>
            <div class = "col-10"> b</div>
        </div>
    </div>
    <div class = "container">
    </div>


    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
</body>

</html>

Теперь, когда я делаю просто border, отображается граница, а когда я делаю border-bottom или border-top, отображаются границы. Однако, когда я использую border-left или border-right, контуры границ не отображаются.

Кроме того, я попытался использовать стили, добавив класс insta-nav в класс div и переопределив стили, добавив border:1px, но граница не добавлена.

Почему причины для этих двух были бы такими ?? Любая помощь будет оценена

django border bootstrap-5

16.12.2020 12:45

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

6 459

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно использовать border-start или border-end вместо border-left или border-right в начальной загрузке 5.

Переменные, утилиты и примеси, чувствительные к горизонтальному направлению, переименованы в более логичные имена — start и end вместо left и right в Bootstrap 5.

Вы можете увидеть больше деталей миграции bootstrap 5 здесь: https://getbootstrap.com/docs/5.0/migration/#sass

Это действительно раздражает, на мой взгляд. Они могли бы просто позволить это или добавить возможность включить старый стиль с миксином или чем-то еще. Когда мне нужно правое поле, «мистер» просто имеет смысл - даже если вы не знаете бутстрап, вы легко его поймете и почти сразу переведете в своей голове. Поддержка LTR удобна, если она вам нужна, а мне нет. Оставляет неприятный осадок наличие слоя абстракции для функции, которая может мне и не понадобиться. Попробую, но на 99% уверен, что в итоге я объявлю все «старые» варианты полей/отступов в своем собственном css:/

— 01.07.2021 20:13

23.12.2020 12:54