Cela fonctionne bien, rend le bouton taille 4
<div>
<button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>
Mais ce qui suit ne fonctionne pas:
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
Ce qui n'a pas de sens pour moi, car je pensais que le div n'était qu'un conteneur et que ses styles / classes sont transmis à ses éléments.
3 Réponses :
col-xs-4 définit la largeur de l'élément actuel à environ 33% et les ensembles btn-block la largeur de l'élément actuel à 100% .
Dans ce code, la largeur (div) de l'élément parent est 33% code > (à cause de col-xs-4 ) et la largeur de l'élément enfant est de 100% (à cause de btn-block ).
<div>
<button class="col-xs-4 btn btn-primary">Like</button>
</div>
Dans le code suivant, l'affichage du parent div est block et sa largeur change en fonction de ce qu'il contient. Et dans l'élément enfant (Button), il a à la fois les classes col-xs-4 et btn-block , mais btn-block définit width: 100% et désactive l'effet col-xs-4 (width: 33%).
<div>
<button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>
Si vous supprimez btn-block vous verrez que col-xs-4 fonctionne très bien et définit width:33%
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
Dans votre premier exemple, le div a la classe "col-xs-4" et ne changera donc pas de taille en fonction de ce qu'il y a dans le div.
Dans votre deuxième exemple, le div n'est pas donné de classe et changera donc de taille, en fonction de ce qu'il y a à l'intérieur du div.
La raison pour laquelle votre deuxième exemple ne fonctionne pas est que vos autres classes modifient également la taille du bouton. En lisant d'abord la classe "col-xs-4", la taille est remplacée par l'une des autres classes.
vous ne pouvez pas appliquer col-xs- * ou tout autre avec des boutons mais si vous voulez ajuster la taille de votre bouton référez-vous ceci -> https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Vous ne devriez pas . Mais vous pouvez . Voir violon dans ma réponse.
Brother essaie une fois de supprimer col-xs-4 du bouton, puis la taille du bouton ne changera pas à cause de la classe de bouton btn btn-block, essayez une fois.
Lorsque vous utilisez Bootstrap, vous devez comprendre le fonctionnement du Grid System .