0

estoy practicando html y css. Estoy intentando hacer una página web con un poco más de detalles y un diseño más limpio así que quise implementar Bootstrap 5, ya tenía mucho de mi código y se veía acomodado, para incorporarlo a mi código lo pongo de esta manera:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

Pero al momento de ponerlo y revisar como se ve pasa de esto:

Antes de bootstrap Antes de bootstrap

Después de bootstrap introducir la descripción de la imagen aquí

Al igual que con responsividad se mueve todo Antes introducir la descripción de la imagen aquí

Después introducir la descripción de la imagen aquí Como se ve en la foto se desacomoda mi navbar e incluso donde está el texto y la imagen se alejan de los bordes de la página. Ya estuve checando mi código, he quitado elemento por elemento para ver que es lo que pudiera intervenir con bootstrap, pero nada funciona para regresar el formato acomodado que tenía. Aquí está mi código de html:

<!DOCTYPE HTML>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="inicio.css" />
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
   </head>
   <body>
      <div class="navigation">
         <div class="container">
            <div class="navbar">
               <div class="logo-toggle-container">
                  <a href="#">
                  <img src="fotos_inicio/Paquetería (2).png" alt="" />
                  </a>
                  <span class="toggle-box">
                  <span></span>
                  <span></span>
                  <span></span>
                  </span>
               </div>
               
               <ul class="menu">
                  <li><a href="#">Sucursales</a></li>
                  <li><a href="#">Destinos y horarios</a></li>
                  <li><a href="#">Servicios</a></li>
                  <li><a href="#">Crear cuenta</a></li>
                  <button type="button" class="btn btn-outline-primary">Inicia sesión</button>
               </ul>
            </div>
         </div>
      </div>

      <div class="section">
        <div class="container2">
            <h1 class="main-text">Paquetería Tamazula</h1>
            <hr width="50" size="5" color="#3b7cff">
            <br>
            <p class=""> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam vero quia perspiciatis? Necessitatibus cum expedita quisquam itaque minima ea incidunt ratione, perferendis similique quam! Quaerat facere cum est commodi provident.</p>
        </div>
        <div>
            &nbsp
        </div>
        <img src="fotos_inicio/p1.jpeg" alt="">
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type="text/javascript" src="inicio.js"></script>
      <b4-></b4->
   </body>
</html>

Pensé que podría ser por el css, pero de todas formas no me funciona (código css):

*
{
    margin:0;
    padding:0;
}

body
{
    width: 100%;
    height: 100vh;
    font-family: 'helvetica';
    font-weight: 200;
}

.navigation
{
    background-color:#fff;
}

/*AQUI*/
.navigation > .container
{
    max-width: 90%;
    margin: auto;
}

.navigation .navbar
{
    position:relative;
}

.navigation .navbar .logo-toggle-container
{
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
}

.navigation .navbar .logo-toggle-container a
{
    display: block;
}

.navigation .navbar .logo-toggle-container a img
{
    width: 120px;
}

.navigation .menu
{
    text-align: right;
}

@media screen and (min-width:1024px)
{
    .navigation .menu
    {
        display: block !important;
        height: auto !important;
    }
}

.navigation .menu li
{
    display: inline-block;
    padding: 43px 1px;
}

.navigation .menu li a
{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-family: 600;
    letter-spacing: 1px;
    color: #163470;
    font-size: 16px;
}

.navigation .menu li:nth-child(1),
.navigation .menu li:nth-child(2),
.navigation .menu li:nth-child(3)
{
    float: left;
}

.navigation .menu li:hover a
{
    color: #BF192A;
}

@media screen and (max-width:983px)
{
    .navigation .navbar .logo-toggle-container
    {
        position: static;
        transform: translateX(0%);
    }
    .navigation .navbar .logo-toggle-container a
    {
        width: 80%;
    }

    .navigation .navbar .logo-toggle-container .toggle-box
    {
        position: absolute;
        right: 10px;
        top: 30px;
        display: block;
        width: 30px;
        background: #3b7cff;
        padding: 15px;
        cursor: pointer;
        border-radius: 5px;
    }
    .navigation .navbar .logo-toggle-container .toggle-box span
    {
        display: block;
        max-width: 90%;
        margin: auto;
        height: 2px;
        background-color: #fff;
        margin-bottom: 4px;
    }

    .navigation .navbar .logo-toggle-container .toggle-box span:last-child
    {
        margin-bottom: 0;
    }
    
    .navigation .menu
    {
        text-align: center;
        display: none;
    }
    .navigation .menu li
    {
        display: block;
        float: none !important;
        padding: 0 10px;
        border-bottom: 0.5px solid #ccc;
    }

    .main-text
    {
        width: 100%;
    }
}

.section
{
    margin: auto;
    display:flex;
    justify-content: space-between;
    padding: 40px;
    width: 90%;
    line-height: 2;
    background-color:rgb(242, 241, 239);
}

.section img
{
    height: 300px;
    border-radius: 8px;
}

.section h1
{
    margin: 0;
    color:dimgrey;
    font-weight: 300;
}

.section p
{
    color: #163470;
}

.btn-primary:hover
{
    background-color: #BF192A;
}

.btn-primary:hover
{
    color: #BF192A;
}

¿Alguien sabe por qué pasa esto y como lo puedo solucionar, si hay algo en el código que interfiera con bootstrap?

2
  • 1
    Todo CSS personalizado interfiere con bootstrap. Deberias quitarlo todo y empezar de cero. Te recomiendo que solo uses CSS personalizado para cambiar colores, bordes, y poca cosa más, pues a la que empiezas a usar margin, font-weight, height, padding, width, justify-content, etc.. estás interferiendo con las clases de bootstrap sí o sí, y los resultados serán siempre imprevisibles. Bootstrap tiene sus propias clases para cada una de esas cosas, y son las que debes usar en cada caso, pero no CSS personalizado o no te saldrá nunca bien.
    – masterguru
    Commented el 17 oct. 2022 a las 17:41
  • Bootstrap maneja estilos propios mediante sus clases y es utilizado con ese fin, facilita la creación de proyectos estilizados (mas bonitos) sin necesidad de generar tanto CSS aparte, de lo contrario mejor haz tus estilos personalizados sin la librería. Commented el 17 oct. 2022 a las 18:12

1 respuesta 1

0

Ya lo pude resolver, resulta que Bootstrap tiene un navbar integrado en sus diseños, al poner navbar como el nombre de mis clases activaba el de Bootstrap y me ponía cosas en mi navbar que hacía que se moviera de esa manera. La solución fue cambiar el nombre de navbar a navbarra y dejó de moverse :3

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.