Comment créer une colonne de largeur dynamique dans Twitter Bootstrap

structure semblable à une Table utilisant l'ancienne étiquette de table

je plaisante - ou pas.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>MamiePVillalobos@teleworm.us</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</td></tr>
</table>

en Utilisant le système de grille

Dans la documentation sur le bootstrap système de grille Je n'ai pas pu trouver de blocs de construction de largeur automatique. Tout ce qui sort de la boîte a une certaine largeur et d'un nombre fixe de colonnes:

   <div class="row">
      <div class="span2">ID</div>
      <div class="span2">Name</div>
      <div class="span8">E-Mail</div>
    </div>
    <div class="row">
      <div class="span2">100001</div>
      <div class="span2">Joe</div>
      <div class="span8">MamiePVillalobos@teleworm.us</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">ChristineJWilliams@dayrep.com</div>
    </div>

donc je suppose que vous devez construire votre propre version pour une table à 3 colonnes avec taille auto.

Dans mon démo la grille de colonne de maquillage si l'espace est étroit, ou, si l'espace est trop large, les colonnes sont tendus.

mise à Jour créatives de balisage

j'ai mis à jour mon démo avec une classe personnalisée. Le markup créatif se rapproche de ce que vous recherchez

  <div class="row">
      <div class="spanFl">100000001 <br />
        100
      </div>
      <div class="spanFl">Joe <br/>
          Christine
      </div>
      <div class="spanFl">MamiePVillalobos@teleworm.us <br />
        ChristineJWilliams@dayrep.com
      </div>
  </div>    

utilisation de la table d'affichage css-3

tutsplus j'ai trouvé un article utilisant css-3 display:table mettre en place une table comme la mise en page. Sauf si vous utilisez trois divs pour chaque rangée, il ne résout pas les problèmes d'enrubannage des rangées.

#content {  
    display: table;  
}  
#mainContent {  
    display: table-cell;  
    width: 620px;  
    padding-right: 22px;  
}  
aside {  
    display: table-cell;  
    width: 300px;  
}  

Bootstrap responsive design

Que j'ai compris bootstrap documentation il n'y a pas de soultion intégrée pour une disposition à 3 colonnes avec une largeur automatique et restante. Pour citer la page responsive design sur bootstrap: "utilisez les requêtes médias de manière responsable et seulement comme un début pour vos audiences mobiles. Pour les projets de plus grande envergure, envisagez un code dédié des bases et non des couches de requêtes des médias."

Pourriez-vous expliquer pourquoi vous ne pouvez pas utiliser un tableau?