Twitter bootstrap multiples divs sur une ligne

Question

CSS noob ici. Je veux divs dans la même rangée. En utilisant certains CSS bootstrap twitter je:

.row-fluid { 
    width: 100%; 
    *zoom: 1; 
} 

.span6{ 
    width: 460px; 
} 

.row-fluid .span6 { 
    width: 48.717948717948715%; 
    *width: 48.664757228587014%; 
} 

div { 
    position: relative; 
    background: orange; 
    height: 5em; 
} 

et mon HTML est ...

<div class="row-fluid"> 
<div class="span6">Foo</div> 
<div class="span6">Bar</div> 
</div> 

Foo et Bar ne sont pas une une ligne. Une idée de ce que je fais mal?

Voici le violon JS: http://jsfiddle.net/cFgTA/

Merci.

Answer 1

Utilisez-vous réellement le bootstrap Twitter ou en copiez-vous des parties? Vous n'avez qu'une petite fraction de la css qui définit réellement la fonctionnalité row-fluid. Par exemple, le premier élément a normalement ses changements de marges pour tenir compte des pixels supplémentaires qu'un élément a autour de lui et tous les éléments qui ont une classe span* qui leur sont assignés sont supposés être float: left comme mentionné par mshsayem.

Si vous regardez ce fiddle, qui utilise un bootstrap CDN et votre code commenté, il n'y a pas de problèmes. Je vous recommande d'utiliser le fichier css réel fourni par Twitter, sauf si vous connaissez leur feuille de style & css pour y apporter des modifications.

Answer 2

Je ne sais pas bootstrap; mais il semble que vous avez manqué un float:left sur .row-fluid .span6. Vérifiez si cela est correct: http://jsfiddle.net/cFgTA/1