web-dev-qa-db-fra.com

Comment utiliser Bootstrap 3 système de grille avec composant table?

J'ai commencé une migration vers un système de grille en utilisant Bootstrap 3, mais les exemples de la documentation utilisent tous des DIV: http://getbootstrap.com/css/#grid =

J'ai créé un code quelque peu redondant qui mélange les classes DIV avec les balises/classes TABLE: http://getbootstrap.com/css/#tables

Le problème est que la disposition double les frontières et je pense que cela devrait être une meilleure façon de le faire. Des recommandations à ce sujet?

Un exemple de code dans Fiddle: http://jsfiddle.net/7g8nV/1/

<div class="table-responsive">
  <table class="table table-bordered"> 
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 1:</label>
    </td>
    <td class="col-md-9">
      Value 1
    </td>
  </tr>
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 2:</label>
    </td>
    <td class="col-md-9">
      Value 2
    </td>
  </tr>
  <tr class="row">
    <td class="field-label col-md-3 active">
      <label>Field 3:</label>
    </td>
    <td class="col-md-9">
      Value 3
    </td>
  </tr>
</table>
</div>

Merci d'avance.

twitter-bootstrapresponsive-designtwitter-bootstrap-3grid-system
20
StaticX

Supprimez la classe row de votre <tr> éléments. Cette classe fait ressembler un élément non-table-row à une table-row et ajoute des styles qui cassent une norme <tr>. Vous pouvez toujours utiliser les classes "col" comme d'habitude:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<table class="table table-bordered"> 
  <tr>
    <td class="field-label col-xs-3 active">
      <label>Field 1:</label>
    </td>
    <td class="col-md-9">
      Value 1
    </td>
  </tr>
  <tr>
    <td class="field-label col-xs-3 active">
      <label>Field 2:</label>
    </td>
    <td class="col-md-9">
      Value 2
    </td>
  </tr>
  <tr>
    <td class="field-label col-xs-3 active">
      <label>Field 3:</label>
    </td>
    <td class="col-md-9">
      Value 3
    </td>
  </tr>
</table>
50
Ross Allen