Estoy tratando de configurar el carrusel de Bootstrap de Twitter con varios elementos a la vez que mantengo la capacidad de respuesta.

Tengo un jsfiddle para probar la configuraciónhttp://jsfiddle.net/Va8Un/

Lo que me gustaría que sucediera es mostrar 4 imágenes, cada una con título para mantener los títulos de los elementos, etc., dentro de un panel de carrusel, y deberían cambiar su tamaño para que se ajusten a la pantalla y permanezcan en la misma fila en todo momento. En este momento, estoy ignorando por completo cualquier intento que haga para ajustar el tamaño de la imagen a la pantalla.max-width:100%; Haría el truco pero no parece afectarlo. Además, la 4ta imagen se está empujando a una segunda fila porque las imágenes no están redimensionando:

¿Alguna forma de arreglar esto con CSS puro o debo buscar opciones más allá de Twitter Bootstrap?

Puedes ver el resultado aquí:http://jsfiddle.net/Va8Un/embedded/result/

Aquí está el 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>