dimanche 15 décembre 2013

Bootstrap : span ne fonctionne pas

J'ai essayé de faire fonctionner une simple row avec Bootsrap mais sans succès :

<div class="row" style="border: 1px solid green">
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
        <div class="span2" style="border: 1px solid red">Foo!</div>
        <div class="span2" style="border: 1px solid red">Bar!</div>
        <div class="span2" style="border: 1px solid red">Baz!</div>
</div>

En faite, j'utilise Bootstrap 3.x qui contient des balises différentes de Bootstrap 2.x.Par exemple, span-* a été remplacé par col-md-*.
Donc pour l'exemple ci-dessus, la solution est  :

<div class="row" style="border: 1px solid green">        <div class="col-md-2" style="border: 1px solid red">Foo!</div>        <div class="col-md-2" style="border: 1px solid red">Bar!</div>        <div class="col-md-2" style="border: 1px solid red">Baz!</div>        <div class="col-md-2" style="border: 1px solid red">Foo!</div>        <div class="col-md-2" style="border: 1px solid red">Bar!</div>        <div class="col-md-2" style="border: 1px solid red">Baz!</div></div>

Pour plus de détails :
http://getbootstrap.com/getting-started/#migration
http://stackoverflow.com/questions/18527466/twitter-bootstrap-span-columns-not-displaying-correctly/18527554#18527554