web-dev-qa-db-ja.com

使用方法Bootstrap= 3グリッドシステムとテーブルコンポーネント？

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>

前もって感謝します。

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

<tr>要素から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>
50
Ross Allen