¿Cómo hacer nav-tabs desplazarse horizontalmente en bootstrap 3?

He encontrado muchos ejemplos para otras versiones de bootstrap en línea pero no puedo encontrar nada para hacer nav-tabs desplazarse horizontalmente en bootstrap 3...

He probado mucho css estableciendo el contenedor de nav para bloquear y otras cosas pero nada ..

Aquí están mis nav-tabs:

 Latest compiled and minified CSS

¿Cómo podría hacerlo girar horizontalmente en lugar de ir en línea nueva cuando los elementos no encajan en la pantalla?

Pregunta hecha hace 3 años, 4 meses, 28 días - Por scriptwarrior

4 Respuestas:

  • ul {
    display: flex;
    flex-direction: row;
}

.nav-tabs > li > a {
    height: 100%;
}

/** Optionally if you don't want word wrap **/
.nav-tabs > li {
    white-space: nowrap;
}

.headerContainer {
    width: fit-content;
}
     Latest compiled and minified CSS

    Respondida el Dec 18, 2020 a las 15:13 - por bugbusterx

    Votos positivos: 0 | Votos negativos: 0

  • Ya que quería añadir un pergamino en el eje X, sólo tiene que añadir a su estilo. css file this:

    ul {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

    Pero, en mi opinión, esto es algo muy inusual que hacer.

    Respondida el Dec 18, 2020 a las 15:20 - por pixelpioneerbbb5

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr que las nav-tabs se desplacen horizontalmente en Bootstrap 3, puede utilizar CSS para hacer que el contenedor de las tabs tenga un ancho fijo y que sea scrollable en el eje horizontal cuando los elementos no quepan en la pantalla.

    Aquí te muestro un ejemplo de cómo podrías hacerlo:

    • Agrega el siguiente CSS a tu código:
    css
.wrapper {
  width: 100%; / O el ancho que desees /
  overflow-x: auto; / Hace que el contenedor sea scrollable en el eje X /
  white-space: nowrap; / Para que los elementos no se rompan en varias líneas /
}

.nav-tabs {
  display: inline-block; / Permite que los elementos de las tabs se muestren en línea /
  white-space: normal; / Restaura el espacio entre palabras /
}
    • Asegúrate de que añades este CSS después de la carga de Bootstrap para que tenga prioridad.

    Con estos estilos, el contenedor de la navegación mantendrá un ancho fijo y permitirá desplazarse horizontalmente cuando los elementos no encajen en la pantalla. Los elementos de las tabs se mostrarán en línea y no se romperán en varias líneas.

    Espero que esto te ayude a lograr el comportamiento deseado en tus nav-tabs en Bootstrap 3. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 19, 2020 a las 15:17 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para hacer que las pestañas nav-tabs se desplacen horizontalmente en Bootstrap 3, puedes utilizar la siguiente implementación de CSS:

    css
/ Ajusta el contenedor de pestañas /
.nav-tabs-wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

/ Oculta la barra de desplazamiento horizontal /
.nav-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

    Luego, envuelve tus pestañas nav-tabs en un contenedor con la clase nav-tabs-wrapper:

    html

    
  
      
    ...

    Esto debería hacer que tus pestañas se desplacen horizontalmente cuando no quepan en la pantalla.

    Nota: Es posible que necesites ajustar los estilos CSS dependiendo del diseño específico de tu página web.

    Respondida el Dec 19, 2020 a las 15:23 - por Gemini

    Votos positivos: 0 | Votos negativos: 0