Je crée un site Web pour mon père en utilisant Twitter Bootstrap, c'est fait sauf pour une chose: je ne sais pas comment:
- réduire la largeur du carrousel
- centrez le carrousel
- faites toujours des flèches de défilement sur l'image
voici le site web pour vérifier la source
J'ai littéralement parcouru ligne par ligne le css et ajusté tous les aspects du carrousel, puis je l'ai vérifié dans mon navigateur.
Un autre point de confusion est que certains de ces ajustements ont un effet si je le teste dans mon navigateur avec SHIFT+CTRL+R (donc le bloc-notes ++ l'ouvre dans google chrome directement depuis mon bureau sans utiliser de serveur ou d'hôte) et a vu des changements maladroits, mais aucun de ces changements n'est reporté lorsque je les place sur le serveur.
J'ai vu d'autres articles suggérant des ajustements à .carousel
et @image
et j'en ai essayé aussi sans succès.
Vous pouvez simplement définir la largeur du carrousel à l'aide de CSS. Le centrage d'un élément de bloc se fait avec margin: 0 auto
. Ne changez que le CSS de .carousel
, le reste est automatiquement correctement stylisé.
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
...
</div>
Découvrez ce jsfiddle pour le voir fonctionner.
Ajoutez simplement une classe de "conteneur" sur le DIV avec un ID de "myCarousel".
Donc ça...
<div id="myCarousel" class="carousel slide">
Devient...
<div id="myCarousel" class="carousel slide container">