Bootstrap-Karussell-Beschriftung wird im Vollbildmodus 1920 x 1080 nicht angezeigt?

Ich versuche herauszufinden, warum die Karussellunterschrift nicht in einem vergrößerten Fenster mit 1920 x 1080 angezeigt wird. Wenn das Fenster nicht gesprengt wird, wird die Bildunterschrift in Ordnung angezeigt. Der fragliche Code:

<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>

Sie können es hier in Aktion sehen: http://foxpile.net/wordpress/

Wenn ich die Bilder durch eines außerhalb des Themas ersetze (ich habe http://placehold.it/1920×500 .. alles scheint richtig zu funktionieren)

Ich verwende die neueste Version von WordPress und Bootstrap 3.2.0

Hinzufügen top: 46%; in dem .carousel-caption während Auflösung größer als 1280px. Dadurch wird das Problem behoben, versuchen Sie es mit einem Code-Inspektor wie Feuerwanze usw.

Finden Sie die folgende Medienabfrage in Bootstrap oder wenn Sie Bootstrap CSS überschreiben, fügen Sie diese in die überschreibende CSS-Datei ein;

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

bei größerer Auflösung bewegt sich die Beschriftung nach unten, hat oben mehr Versatz und wird aufgrund des Containers nicht angezeigt overflow hidden. Was ich bei einer Auflösung von größer als getan habe 1200px Ich habe den Top-Offset der Beschriftung reduziert. Dadurch wird es sogar sichtbar 1920x1080p.

viel Glück!

Die mit Ihrem Design gelieferten Bilder haben eine Größe von 1920 x 650, während das Karussell eine explizite Größe hat max-height spezifizierten

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

Die Verwendung Ihrer Platzhalterbilder führt dazu, dass ein Bild kleiner ist und daher angezeigt wird, bis jemand mit einem breiteren Bildschirm eintrifft.

Die Lösung ist entweder:

• Erlauben Sie dem Banner, über 500 Pixel zu wachsen (indem Sie diese maximale Höhe entfernen)
• Verwenden Sie Bilder mit einer Höhe kleiner oder gleich 500 Pixel, aber Sie müssen in diesem Fall ihr Verhalten auf einem größeren Bildschirm definieren
• Ändern Sie die Position der Beschriftung so, dass sie relativ zum Karussell und nicht zum Element ist

Auch wenn dies ein relativ alter Beitrag ist, könnte dies für einige Leute hilfreich sein. Sie können auch einfach einen festen Höhenwert hinzufügen .item divs:

PenCode 1

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

Dieser Ansatz hat einen weiteren Vorteil, wenn Sie die Bilder als Hintergrundbilder hinzufügen .item divs anstelle von Bildern, und fügen Sie hinzu background-size:cover; zum .item CSS erhalten Sie ein ansprechendes Bild, ohne sich mit der Bildhöhe für kleine Bildschirme befassen zu müssen.

CodePen 2

_{* Ändern Sie die Größe beider Stifte und sehen Sie die unterschiedliche Höhe}