¿Por qué la derecha fronteriza izquierda no trabaja para Bootstrap 5 Django?

Así que tengo el siguiente código:

{% load static %}

html


    Verification Code Email
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        


    

        

            
    # This one right here
                                 
            

            
 b

Ahora cuando lo hago border, la frontera se muestra, y cuando lo hago border-bottom o border-top, las fronteras se muestran. Sin embargo, cuando uso border-left o border-rightNo se muestran los contornos fronterizos.

Además, intenté usar estilos añadiendo un insta-nav clase a la clase div y anular los estilos añadiendo border:1px, pero la frontera no se añade.

¿Por qué las razones de estos dos serían así? Cualquier ayuda sería apreciada

Pregunta hecha hace 3 años, 5 meses, 1 días - Por scriptsorcerer

3 Respuestas:

  • Necesitas usar border-start o border-end en lugar de border-left o border-right en el bootstrap 5.

    Variables, utilidades y mezclas de dirección horizontal se renombran con nombres más lógicos: start y end en lugar de left y right dentro Bootstrap 5.

    Puede ver más detalles de migración bootstrap 5 aquí: https://getbootstrap.com/docs/5.0/migration/#sass

    Respondida el Dec 16, 2020 a las 11:53 - por logicloom

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con la propiedad border-left y border-right que no se muestran en tu HTML podría estar relacionado con el flujo de diseño y el uso de clases de Bootstrap en las columnas.

    En Bootstrap 5, las clases de columnas como col-1, col-10, etc., se basan en el sistema de cuadrícula CSS de Bootstrap. Cuando aplicas la clase border-right a una columna en Bootstrap, es posible que la columna en sí no tenga suficiente ancho para que la frontera derecha sea visible. Esto se debe a que las columnas en Bootstrap se basan en un sistema de 12 columnas y la clase col-1 asigna un ancho del 8.3333%, lo que podría no ser suficiente para mostrar una frontera claramente.

    Una solución alternativa para agregar una frontera derecha a la columna sería agregar un contenedor adicional dentro de la columna y aplicar la frontera derecha a ese contenedor. Por ejemplo:

    html

    En este caso, la clase border-right se aplicaría al contenedor interno en lugar de la columna en sí, lo que podría ayudar a que la frontera sea visible.

    Además, al aplicar estilos personalizados mediante CSS, asegúrate de que no estés siendo anulado por estilos de Bootstrap que puedan tener prioridad. Puedes usar los selectores CSS con una mayor especificidad para asegurarte de que tus estilos se apliquen correctamente.

    Espero que esta información te sea útil para resolver el problema con las fronteras izquierda y derecha en tu código. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 17, 2020 a las 11:52 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Hay un par de razones por las que la frontera derecha no funciona en tu código:

    • Conflicto de estilos: El estilo `float: right` que estás aplicando a la imagen de Instagram crea un espacio en blanco en el lado derecho del div, lo que hace que la frontera no sea visible.
    • Falta de ancho: El div que contiene la imagen no tiene un ancho definido. Esto significa que el navegador no sabe cuánto espacio ocupará el div, por lo que la frontera no se mostrará correctamente.

    Para resolver estos problemas, puedes hacer lo siguiente:

    • Actualiza la propiedad `float`: En lugar de utilizar `float: right`, utiliza `margin-left: auto` para alinear la imagen a la derecha. Esto evitará que se cree un espacio en blanco en el lado derecho del div.
    • Define el ancho: Añade un ancho explícito al div que contiene la imagen, por ejemplo:

    Con estos cambios, la frontera derecha debería mostrarse correctamente.

    Respondida el Dec 17, 2020 a las 12:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0