web-dev-qa-db-fra.com

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

Comment utilisez-vous Twitter Bootstrap pour créer une structure de liste semblable à une table, où certaines colonnes prennent autant d'espace que nécessaire pour accueillir l'élément le plus large de cette colonne, et une seule colonne prend le reste espace?

Par exemple:

Id    |Name     |Email address                
100001|Joe      |[email protected]
100   |Christine|[email protected]
1001  |John     |[email protected]

la colonne Id prend juste assez d'espace pour accueillir l'ID 100001, qui est l'ID le plus long.

La colonne Nom prend juste assez d'espace pour accueillir le nom Christine.

La colonne Courriel occupe l'espace restant.

javascripthtmlcsstwitter-bootstrapstylesheet
32
Elad

Structure de type table utilisant l'ancienne balise de table

Je plaisante - ou je ne le suis pas.

<table class="table">
  <tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
  <tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>
  <tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>
  <tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr>
</table>

Utilisation du système de grille

Dans la documentation sur le système de grille d'amorçage je n'ai trouvé aucun bloc de construction à largeur automatique. Tout ce qui sort de la boîte a une certaine largeur et 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">[email protected]</div>
    </div>
        <div class="row">
      <div class="span2">100</div>
      <div class="span2">Christine</div>
      <div class="span8">[email protected]</div>
    </div>

Par conséquent, je suppose que vous devez créer votre propre version pour un tableau à 3 colonnes avec taille automatique.

Dans ma démo la grille-colonne s'enroule si l'espace est à rétrécir ou, si l'espace est trop large, les colonnes sont étirées.

Mettre à jour avec le balisage créatif

J'ai mis à jour mon démo avec une classe personnalisée. Le balisage 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">[email protected] <br />
        [email protected]
      </div>
  </div>

Utilisation de la table d'affichage CSS-3

Sur tutsplus j'ai trouvé un article en utilisant css-3 display:table pour configurer une table comme une mise en page. Sauf si vous utilisez trois divisions pour chaque ligne, cela ne résout pas les problèmes de retour à la ligne.

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

Conception réactive Bootstrap

Pour autant que j'ai compris le documentation de bootstrap il n'y a pas de soultion intégré pour une mise en page à 3 colonnes avec auto et largeur restante. Pour citer la page de conception réactive sur bootstrap: "Utilisez les requêtes multimédias de manière responsable et uniquement comme point de départ pour votre public mobile. Pour les projets plus importants, envisagez des bases de code dédiées et non des couches de requêtes multimédias.

Pourriez-vous expliquer davantage pourquoi vous ne pouvez pas utiliser une table?

27
surfmuggle

Comme d'autres l'ont dit, vous devriez utiliser des tableaux réguliers là où ils ont du sens. De plus, l'affichage CSS3: la table peut être une bonne solution.

Selon le cas d'utilisation, il existe une solution différente que vous pourriez envisager:
https://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css
Ceci est un morceau de CSS qui ajoute "col-sm-auto" en plus de "col-sm-1", "col-sm-5" etc.

(Atm, je recommanderais simplement de copier ceci dans un fichier css personnalisé et de l'adapter à vos besoins.)

Exemple

<div class="row">
  <div class="col-xs-auto">Left</div>
  <div class="col-xs-auto-right">Right</div>
  <div class="col-middle">Middle</div>
</div>

Voici un violon: http://jsfiddle.net/9wzqz/

Idée

  • .col - * - auto flotte vers la gauche, avec le remplissage typique, mais sans réglage de largeur explicite.
  • .col - * - la droite automatique flotte à droite à la place.
  • .col-middle a display: table, ce qui l'empêche de flotter autour des autres éléments.
  • Utilisez "xs", "sm", "md", "lg" pour cibler des largeurs d'écran spécifiques.

Limites

Les colonnes gauche/droite se développeront sur toute leur largeur si vous les remplissez de texte long. Mieux les utiliser pour des trucs à largeur fixe comme des images.

La colonne du milieu ne prendra toute la largeur disponible que si elle contient suffisamment de contenu.

9
donquixote

si vous n'avez pas besoin de limiter la taille de la colonne, vous pouvez simplement désactiver la largeur.

<span class="col-xs-1" style="width: inherit !important; ">unknown ...</span>

J'ai besoin de la définition bootstrap pour les propriétés de l'autre colonne (rembourrage, hauteur, etc.), j'ai donc ajouté une définition de col, mais une petite unité (col-xs-1).

remarques:

  • la clause "! important" pourrait être supprimée (je ne suis pas sûr)
  • Dans mon projet, les textes sont connus pour être petits de toute façon.
4
Berry Tsakala