twitter bootstrap dans Windows app moderne

Question

Je suis la mise en œuvre d'une application multi-plateforme simple. J'ai besoin au moins de la compatibilité win8 et Android. J'ai décidé d'utiliser PhoneGap et Twitter bootstrap pour cela.

Lorsque j'essaie d'implémenter une interface utilisateur fluide à l'aide de la grille bootstrap, elle ne s'affiche pas correctement dans win8. Ex, lorsque je tente la grille exemple suivant html:

<div class="row"> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
     <div class="col-md-1">.col-md-1</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-md-8">.col-md-8</div> 
 
     <div class="col-md-4">.col-md-4</div> 
 
    </div>

Je reçois la mise en page correcte dans le navigateur, mais dans Win8 émulateur application moderne, toutes les colonnes sont toujours tendues à l'écran entier. Peu importe la largeur de l'écran.

Y at-il un moyen de résoudre ce problème? Ou bootstrap n'est pas compatible avec win8? Quelle pourrait être l'alternative alors? J'ai besoin de quelque chose que je puisse réutiliser à travers les applications win8 et html5 mobiles.

Answer 1

sur android il semble bien comme prévu?

Je demande parce que je ne sais pas ce que vous attendez, en utilisant col-MD- * étirera lorsque la résolution de l'écran est inférieure à 992 px

ici le système de grille: http://getbootstrap.com/css/#grid-options peut-être vous vouliez utilise col-sm- *?

quelque chose comme ceci:

<div class="row"> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
    <div class="col-sm-1">.col-md-1</div> 
</div> 
<div class="row"> 
    <div class="col-sm-8">.col-md-8</div> 
    <div class="col-sm-4">.col-md-4</div> 
</div>