Twitter Bootstrap Responsive Carrousel Avec Plusieurs Éléments

Je suis en train de configuration Twitter Bootstrap carrousel avec plusieurs éléments, tout en conservant la réactivité.

J'ai un jsfiddle pour la configuration du test http://jsfiddle.net/Va8Un/

Ce que je voudrais arriver, c'est pour afficher 4 images avec légende à tenir l'élément de titres et ainsi de suite dans un carrousel volet et ils doivent être redimensionnées pour s'adapter à l'écran pour rester sur la même ligne à tout moment. Droit maintenant, c'est complètement ignorant les tentatives je faire pour régler la taille de l'image à l'écran, j'ai pensé que le réglage de l'img max-width:100%; ferait l'affaire mais il ne semble pas à l'effectuer. En outre, la 4ème image est poussé sur une deuxième ligne, car les images ne sont pas de redimensionnement:

Possible de résoudre ce problème avec de la pure CSS ou dois-je regarder pour les options au-delà de Twitter Bootstrap?

Vous pouvez voir le résultat ici: http://jsfiddle.net/Va8Un/embedded/result/

Voici le code 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>

Montrer le code de la vue. Vous pouvez placer les images dans un div et de définir sa largeur.
Ajout d'un code + lien afficher. Les images sont déjà enveloppé dans un <div class="thumbnail">, si j'ai mis une taille à cela cependant, il ne sera pas sensible et disparaîtra de l'écran si elle devient trop petite. Pourriez-vous me donner un exemple?

OriginalL'auteur Noz | 2012-09-20

Je l'ai fait de cette façon en utilisant 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>

Où "ryan_thumbnail_carousel_productimages.html" est:

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

OriginalL'auteur Ryan Walton

Vous devez vous connecter pour publier un commentaire.