Twitter Bootstrap-Responsive Karussell Mit Mehreren Elementen

Ich versuche, setup-Twitter Bootstrap-Karussell mit mehreren Elementen, während die Aufrechterhaltung der Reaktionsfähigkeit.

Habe ich ein jsfiddle für die Prüfung setup http://jsfiddle.net/Va8Un/

Was ich möchte, passieren, angezeigt werden 4 Bilder mit caption zu halten, Element-Titel und so weiter in einer Karussell-Bereich und Sie sollten geändert werden, um den Bildschirm passen, bleiben Sie auf der gleichen Zeile zu allen Zeiten. Jetzt ist es komplett ignorieren alle versuche die ich mache, passen Sie die Bildgröße auf dem Bildschirm, ich dachte, die Einstellung der img max-width:100%; würde den trick tun, aber es scheint nicht zu Effekt. Außerdem, das 4. Bild gedrückt wird, um eine zweite Zeile, weil die Bilder nicht Größenanpassung:

Irgendeiner Weise zu beheben, das mit reinem CSS oder soll ich suchen für die Optionen jenseits von Twitter Bootstrap?

Können Sie das Ergebnis hier: http://jsfiddle.net/Va8Un/embedded/result/

Hier ist der HTML:

<div class="container">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
          <div class="item active">
                <ul class="thumbnails span12">
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="caption">
                            <h5>Caption</h5>
                        </div>
                        <div class="thumbnail">
                            <img src="http://placehold.it/260x180" alt="">
                        </div>
                    </li>
                </ul>
          </div>         
          <div class="item">
               ...
          </div>
          <div class="item">
               ...
          </div>

        </div>
        <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
        <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
    </div>
</diV>

InformationsquelleAutor der Frage Noz | 2012-09-20

Habe ich es auf diese Weise mit Twitter Bootstrap:

<!-- Images Thumbnails -->
<div style="position:absolute;top:430px;height:115px;width:350px;margin:10px 0 0 10px;">
    <p style="margin:0;">Images</p>                     
    <!-- Product Images Carousel -->
    <div id="ImagesCarousel" class="carousel slide">
          <!-- carousel items -->
          <div class="carousel-inner">
                <div class="active item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>    
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
                <div class="item">
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                    <?php include 'ryan_thumbnail_carousel_productimages.html'; ?>
                </div>
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#ImagesCarousel" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#ImagesCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

Wo 'ryan_thumbnail_carousel_productimages.html' ist:

<div class="thumbnail" style="float:left;margin:10px 15px 0 0;width:70px;height:70px; position:relative;"></div>

InformationsquelleAutor der Antwort Ryan Walton

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.