Как использовать сетку Bootstrap 3 с табличным компонентом?

Я начал миграцию в grid-систему с помощью Bootstrap 3, но примеры в документации все используются с помощью DIV: http://getbootstrap.com/css/#grid

Я сделал несколько избыточный код, который смешивает классы DIV с тегами/классами TABLE: http://getbootstrap.com/css/#tables

Проблема в том, что макет закрывает границы, и я думаю, что это лучший способ сделать это. Любые рекомендации по этому поводу?

Пример кода в 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>

Спасибо заранее.

Ответы

Ответ 1

Удалите класс row из ваших элементов <tr>. Этот класс делает элемент non-table-row похожим на таблицу-строку и добавляет некоторые стили, которые нарушают стандарт <tr>. Вы все равно можете использовать классы "col", как обычно:

<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>