0

¿Cómo puedo hacer que mi navegador ocupe todo el ancho de la pantalla en todos los dispositivos con boostrap? Estoy usando boostrap ¡He puesto clases para el ancho máximo y nada! En dispositivos móviles la navegación es más pequeña que el contenido y está desactualizado, LO QUE QUIERO es que ocupe todo el ancho de la pantalla, también lo pongo en un contenedor pero es lo mismo La imagen muestra como la navegación, al estar en tamaños pequeños, disminuye más que el contenido de la página y está desactualizada, hay algo de estilo para que en dispositivos móviles eso no me pase, gracias

pd: #con { height: 600PX; background: url(ue.gif); } en el div estoy colocando una imagen solamente, estoy usando la version 5.0

 #container {
        min-width: 310px;
        max-width: 800px;
        height: 400px;
        margin: 0 auto
    }

    .buttons {
        min-width: 310px;
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 0;
        margin: 20px;
    }

    .buttons button {
        cursor: pointer;
        border: 1px solid silver;
        border-right-width: 0;
        background-color: #f8f8f8;
        font-size: 1rem;
        padding: 0.5rem;
        outline: none;
        transition-duration: 0.3s;
        margin: 0;
    }

    .buttons button:first-child {
        border-top-left-radius: 0.3em;
        border-bottom-left-radius: 0.3em;
    }

    .buttons button:last-child {
        border-top-right-radius: 0.3em;
        border-bottom-right-radius: 0.3em;
        border-right-width: 1px;
    }

    .buttons button:hover {
        color: white;
        background-color: rgb(158, 159, 163);
        outline: none;
    }

    .buttons button.active {
        background-color: #0051B4;
        color: white;
    }

    #con {
        width: 100%;
        height: 600PX;
        background: url(ue.gif);
    }

    /* efectos del nav  */
    :root {
        --body-bg-color: #ecedee;
        --text-color: #2d2d30;
        --hr-color: #26292a;
        --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
        --red: #e74c3c;
    }

    ul {
        list-style: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    body {
        margin: 30px 0;
        font: 22px sans-serif;
        background: var(--body-bg-color);
        color: var(--text-color);
    }

    hr {
        border-color: var(--hr-color);
        margin: 20px 0;
    }

    .menu {
        display: flex;
        justify-content: center;
    }

    .menu li {
        margin-right: 70px;
    }

    .menu a {
        position: relative;
        display: block;
        padding: 10px;
        overflow: hidden;
        transition: color 0s 0.25s var(--timing-function);
    }

    .menu a::before,
    .menu a::after {
        position: absolute;
        left: 0;
        width: 100%;
    }

    .menu a::before {
        content: '';
        top: 50%;
        transform: translate(-101%, -50%);
        height: 50%;
        z-index: 1;
        background: var(--text-color);
        transition: transform 0.5s var(--timing-function);
    }

    .menu a::after {
        content: attr(data-icon);
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-color);
        opacity: 0;
        transition: opacity 0s 0.25s var(--timing-function);
    }

    .menu a:hover {
        color: transparent;
    }

    .menu a:hover::before {
        transform: translate(101%, -50%);
    }

    .menu a:hover::after {
        opacity: 1;
    }


    /* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .menu[data-animation="to-left"] a::before {
        transform: translate(101%, -50%);
    }

    .menu[data-animation="to-left"] a:hover::before {
        transform: translate(-101%, -50%);
    }


    /* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .page-footer {
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 1rem;
    }

    .page-footer span {
        color: var(--red);
    }
<div class="container-fluid bg-primary " id="con">
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar sticky-top  ">
  <div class="container-fluid ">
      <a class="navbar-brand  " href="index.html"><i class="far fa-futbol"></i></a>
      <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
          aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end " id="navbarText">
          <ul class="navbar-nav  mb-2 mb-lg-0 menu ">
              <li class="nav-item  ">
                  <a class="nav-link justify-content-center" href="index.html">UEFA Champions League</a>
 </li>
              <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="index.html">Inicio</a>
          </li>
              <li class="nav-item">
                  <a class="nav-link" href="cuartos.html">Cuartos</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="semifinal.html">Semifinal</a>
              </li>
 <li class="nav-item">
    <a class="nav-link" href="final.html">Final</a>
</li>
 </ul>
 <span class="navbar-text">
   <i class="far fa-futbol"></i></a>
 </span>
 </div>
 </div>
</nav>
<div class="row">
    <div class="col-12 col-md-12 mt-3">
        <h2>Enterate de las estadisticas de la UEFA Champions League....</h2>
        <p>Se juega actualmente <strong>semifinal.</strong></p>
        <table class="table mt-5">
            <thead>
                <tr>
                    <th scope="col">Fecha</th>
                    <th scope="col">Equipo1</th>
                    <th scope="col">versus</th>
                    <th scope="col">Equipo2</th>
                    <th scope="col">Resultado</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row"></th>
                    <td></td>
                    <td>VS</td>
                    <td> </td>
                    <td>0 - 0</td>
                </tr>
                <tr>
                    <th scope="row"> </th>
                    <td> </td>
                    <td>VS</td>
                    <td></td>
                    <td>0 - 0</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-12 col-md-12">
    </div>
</div>
</div>

3
  • Deberías ser más especifico con tu pregunta, que versión de Bootstrap estás usando? Porqué tienes estos <div class="container-fluid bg-primary" id="con"> </div> si no hay nada dentro? Tu código está todo revuelto:/ el 7 abr. 2021 a las 15:41
  • #con { height: 600PX; background: url(ue.gif); } en el div estoy colocando una imagen solamente, estoy usando la version 5.0 el 7 abr. 2021 a las 15:42
  • Listo, dale una leída el 7 abr. 2021 a las 17:14

1 respuesta 1

1

Así queda tu código, he puesto comentarios dentro del mismo para que sepas que cosas agregué, es importante que tengas actualizado bootstrap, en este caso usé la beta 3, la más reciente.

Si necesitabas el <meta name="viewport" content="width=device-width,initial-scale=1"> pues informa a los navegadores de los dispositivos móviles que deben establecer el ancho al ancho del dispositivo, solo agregalo a tu header y listo.

Espero te haya funcionado y cualquier duda aquí estoy.

 #container {
     min-width: 310px;
     max-width: 800px;
     height: 400px;
     margin: 0 auto 
}
 .buttons {
     min-width: 310px;
     text-align: center;
     margin-bottom: 1.5rem;
     font-size: 0;
     margin: 20px;
}
 .buttons button {
     cursor: pointer;
     border: 1px solid silver;
     border-right-width: 0;
     background-color: #f8f8f8;
     font-size: 1rem;
     padding: 0.5rem;
     outline: none;
     transition-duration: 0.3s;
     margin: 0;
}
 .buttons button:first-child {
     border-top-left-radius: 0.3em;
     border-bottom-left-radius: 0.3em;
}
 .buttons button:last-child {
     border-top-right-radius: 0.3em;
     border-bottom-right-radius: 0.3em;
     border-right-width: 1px;
}
 .buttons button:hover {
     color: white;
     background-color: rgb(158, 159, 163);
     outline: none;
}
 .buttons button.active {
     background-color: #0051B4;
     color: white;
}
 #con {
     width: 100%;
     height: 600PX;
     background: url(ue.gif);
}
/* efectos del nav */
 :root {
     --body-bg-color: #ecedee;
     --text-color: #2d2d30;
     --hr-color: #26292a;
     --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
     --red: #e74c3c;
}
 ul {
     list-style: none;
}
 a {
     color: inherit;
     text-decoration: none;
}
 body {
     margin: 30px 0;
     font: 22px sans-serif;
     background: var(--body-bg-color);
     color: var(--text-color);
}
 hr {
     border-color: var(--hr-color);
     margin: 20px 0;
}
 .menu {
     display: flex;
     justify-content: center;
}
 .menu li {
     margin-right: 70px;
}
 .menu a {
     position: relative;
     display: block;
     padding: 10px;
     overflow: hidden;
     transition: color 0s 0.25s var(--timing-function);
}
 .menu a::before, .menu a::after {
     position: absolute;
     left: 0;
     width: 100%;
}
 .menu a::before {
     content: '';
     top: 50%;
     transform: translate(-101%, -50%);
     height: 50%;
     z-index: 1;
     background: var(--text-color);
     transition: transform 0.5s var(--timing-function);
}
 .menu a::after {
     content: attr(data-icon);
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     top: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     color: var(--text-color);
     opacity: 0;
     transition: opacity 0s 0.25s var(--timing-function);
}
 .menu a:hover {
     color: transparent;
}
 .menu a:hover::before {
     transform: translate(101%, -50%);
}
 .menu a:hover::after {
     opacity: 1;
}
/* ANIMATIONS –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .menu[data-animation="to-left"] a::before {
     transform: translate(101%, -50%);
}
 .menu[data-animation="to-left"] a:hover::before {
     transform: translate(-101%, -50%);
}
/* FOOTER –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .page-footer {
     position: absolute;
     bottom: 10px;
     right: 10px;
     font-size: 1rem;
}
 .page-footer span {
     color: var(--red);
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!--ARCHIVOS CON LA BETA 3 DE BOOTSTRAP 5-->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
      <!--VIEWPORT PARA EL RESPOSIVE-->
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <!--COLOQUÉ LA NAVBAR DENTRO DE UN HEADER PARA EVITAR CONFUSIONES-->
      <header>
         <nav class="navbar navbar-expand-lg navbar-light bg-light navbar sticky-top  ">
            <div class="container-fluid ">
               <a class="navbar-brand  " href="index.html"><i class="far fa-futbol"></i></a>
               <button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
                  aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse justify-content-end " id="navbarText">
                  <ul class="navbar-nav  mb-2 mb-lg-0 menu ">
                     <li class="nav-item  ">
                        <a class="nav-link justify-content-center" href="index.html">UEFA Champions League</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.html">Inicio</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="cuartos.html">Cuartos</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="semifinal.html">Semifinal</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="final.html">Final</a>
                     </li>
                  </ul>
                  <span class="navbar-text">
                  <i class="far fa-futbol"></i></a>
                  </span>
               </div>
            </div>
         </nav>
      </header>
      <!--QUEDA INTACTA TU IMAGEN-->
      <div class="container-fluid bg-primary " id="con"></div>
      <!--AGREGUÉ UN CONTAINER PARA EL ROW-->
      <div class="container-fluid">
         <div class="row">
            <div class="col-12 col-md-12 mt-3">
               <h2>Enterate de las estadisticas de la UEFA Champions League....</h2>
               <p>Se juega actualmente <strong>semifinal.</strong></p>
               <!--AGREGUÉ UN DIV CON LA CLASE "TABLE-RESPONSIVE" PARA HACERLA RESPONSIVA EN TELEFONOS-->
               <div class="table-responsive">
                  <table class="table mt-5">
                     <thead>
                        <tr>
                           <th scope="col">Fecha</th>
                           <th scope="col">Equipo1</th>
                           <th scope="col">versus</th>
                           <th scope="col">Equipo2</th>
                           <th scope="col">Resultado</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <th scope="row"></th>
                           <td></td>
                           <td>VS</td>
                           <td> </td>
                           <td>0 - 0</td>
                        </tr>
                        <tr>
                           <th scope="row"> </th>
                           <td> </td>
                           <td>VS</td>
                           <td></td>
                           <td>0 - 0</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
            <div class="col-12 col-md-12">
            </div>
         </div>
      </div>
   </body>
</html>

1
  • muchas gracias, era lo que buscaba el 7 abr. 2021 a las 20:13

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.