¿El título del carrusel de Bootstrap no aparece en pantalla completa 1920 x 1080?

4 minutos de lectura

avatar de usuario
pingu

Estoy tratando de averiguar por qué el título del carrusel no se muestra en una ventana ampliada de 1920×1080. Si la ventana no explota, el título se muestra bien. El código en cuestión:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="https://stackoverflow.com/questions/24867673/<?php echo get_bloginfo("template_directory');?>/img/banner-1.jpg" alt="Competitive Prices on Web Design, SEO, and Digital Marketing" />
      <div class="carousel-caption">
        <h3>Quality Web Design</h3>
        <p>Simple and Elegant Web Design, Located in Rochester Hills, Michigan</p>
      </div>
    </div>

    <div class="item">
      <img src="https://stackoverflow.com/questions/24867673/<?php echo get_bloginfo("template_directory');?>/img/banner-3.jpg" alt="Get Your Business Online Today" />
      <div class="carousel-caption">
        <h3>Get Your Business Online Today!</h3>
        <p> ... </p>
      </div>
    </div>

    <div class="item">
      <img src="https://stackoverflow.com/questions/24867673/<?php echo get_bloginfo("template_directory');?>/img/banner-2.jpg" alt="Drive Traffic to Your Site" />
      <div class="carousel-caption">
        <h3>SEO</h3>
        <p>Proper search engine optimization may make or break your website's visibility!</p>
      </div>
    </div>
  </div>

Puedes verlo en acción aqui: http://foxpile.net/wordpress/

Cuando reemplazo las imágenes con una fuera del tema (he usado http://placehold.it/1920×500 .. todo parece funcionar correctamente)

Estoy ejecutando la última versión de WordPress y Bootstrap 3.2.0

avatar de usuario
Aamir Shahzad

Agregar top: 46%; en el .carousel-caption mientras que la resolución mayor que 1280px. Esto solucionará el problema, intente inspeccionar con el inspector de código como chinche de fuego etc.

Encuentre la siguiente consulta de medios en bootstrap o si está reemplazando Bootstrap CSS, agregue esto en el archivo css de reemplazo;

@media only screen and (min-width : 1200px) {
  .carousel-caption
  {
    top: 46%;
  }
}

en una resolución más grande, el título se mueve hacia abajo, las salas tienen más desplazamiento en la parte superior y no se muestran debido al contenedor overflow hidden. Lo que hice en una resolución mayor que 1200px He reducido el desplazamiento superior del subtítulo. Esto hace que se muestre incluso 1920x1080p.

¡buena suerte!

  • Ahh esto tiene perfecto sentido. ¡Gracias por la ayuda!

    – pingu

    21 de julio de 2014 a las 15:35

avatar de usuario
Vinky

Las imágenes que vienen con su tema tienen un tamaño de 1920×650, mientras que el carrusel tiene un tamaño explícito. max-height especificado

.carousel-inner {
    width: 100%;
    max-height: 500px !important;
}

El uso de sus imágenes de marcador de posición conduce a tener una imagen que es más pequeña y, por lo tanto, se mostrará hasta que llegue alguien con una pantalla más ancha.

La solución es:

  • permita que el banner crezca más de 500 px (eliminando esta altura máxima)
  • use imágenes con una altura menor o igual a 500px, pero en ese caso necesita definir su comportamiento en una pantalla más grande
  • cambiar la posición del título para que sea relativo al carrusel, y no al elemento

avatar de usuario
Mi-Creatividad

Aunque esta es una publicación relativamente antigua, podría ser útil para algunas personas. También puede simplemente agregar un valor de altura fija a .item divisiones:

Código de pluma 1

.carousel-inner .item {
  height: 400px;  /* add this */
}

Este enfoque tiene otro beneficio si agrega las imágenes como imágenes de fondo para .item divs en lugar de imágenes, y agregue background-size:cover; hacia .item CSS, obtendrá una imagen receptiva sin tener que lidiar con la altura de las imágenes para pantallas pequeñas.

CódigoPen 2

* Cambie el tamaño de ambos bolígrafos y vea la diferencia de altura

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad