32

Twitter Bootstrapを使用して、テーブルのようなリスト構造を作成するにはどうすればよいですか。一部の列は、その列の最も広い要素に対応するために必要なだけのスペースを取り、1つの列が残りのスペースを取ります。

例えば：

Id    |Name     |Email address                
100001|Joe      |MamiePVillalobos@teleworm.us
100   |Christine|ChristineJWilliams@dayrep.com
1001  |John     |JohnLMiley@dayrep.com

Id列は、最長のIDである100001IDを収容するのに十分なスペースを取ります。

[名前]列には、Christineという名前を収容するのに十分なスペースが必要です。

電子メール列は残りのスペースを取ります 。

4

4 に答える 4

27

古いテーブルタグを使用したテーブルのような構造

冗談です-または私はそうではありません。

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

グリッドシステムの使用

ブートストラップグリッドシステムに関するドキュメントでは、自動幅のビルディングブロックが見つかりませんでした。箱から出してすぐに使えるものには、特定の幅と固定数の列があります。

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

したがって、自動サイズの3列テーブル用に独自のバージョンを作成する必要があると思います。

私のデモでは、スペースが狭い場合はグリッド列が折り返され、スペースが広すぎる場合は列が引き伸ばされます。

クリエイティブなマークアップで更新

カスタムクラスでデモを更新しました。クリエイティブなマークアップはあなたが探しているものに近づきます

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

css-3表示テーブルの使用

tutsplusで、css-3を使用してレイアウトのようなテーブルを設定する記事を見つけました。display:table各行に3つのdivを使用しない限り、行の折り返しの問題は解決されません。

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

ブートストラップレスポンシブデザイン

私がブートストラップのドキュメントを理解している限り、自動で残りの幅を持つ3列のレイアウトに組み込まれた魂はありません。ブートストラップのレスポンシブデザインページを引用するには：「メディアクエリは責任を持って、モバイルオーディエンスの出発点としてのみ使用してください。大規模なプロジェクトの場合は、メディアクエリのレイヤーではなく、専用のコードベースを検討してください。」

テーブルが使えない理由を詳しく教えてください。

于 2012-10-21T20:08:59.187 に答える
10

他の人が言ったように、あなたはそれらが意味をなすところに通常のテーブルを使うべきです。また、CSS3 display：tableは良い解決策になる可能性があります。

ユースケースに応じて、検討できる別のソリューションがあります
。https
://github.com/donquixote/bootstrap-autocolumns/blob/master/bootstrap-autocolumns.css これは、「col-sm」を追加するCSSの一部です。 -「col-sm-1」、「col-sm-5」などに加えて「auto」。

（ATM、これをカスタムcssファイルにコピーして、ニーズに合わせて調整することをお勧めします。）

例

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

ここにフィドルがあります：http：//jsfiddle.net/9wzqz/

アイディア

  • .col-*-autoは左にフロートし、通常のパディングがありますが、明示的な幅の設定はありません。
  • .col-*-auto-rightは、代わりに右にフロートします。
  • .col-middleにはdisplay：tableがあり、他の要素の周りに浮かぶのを防ぎます。
  • 「xs」、「sm」、「md」、「lg」を使用して、特定の画面幅をターゲットにします。

制限事項

長いテキストで埋めると、左/右の列が全幅に拡大します。画像などの固定幅のものに使用することをお勧めします。

真ん中の列は、十分なコンテンツが含まれている場合にのみ、使用可能な幅全体を使用します。

于 2014-07-14T17:53:11.607 に答える
4

列のサイズを制限する必要がない場合は、幅を無効にするだけです。

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

他の列のプロパティ（パディング、高さなど）のブートストラップ定義が必要なので、col定義を追加しましたが、小さな単位（col-xs-1）を追加しました。

ノート：

  • 「！important」句が削除される可能性があります（わかりません）
  • 私のプロジェクトでは、テキストはとにかく小さいことが知られています。
于 2015-04-15T11:51:34.153 に答える
-1

ブートストラップドキュメントによるtable-responsiveと、cssクラスをテーブル要素に 適用して応答性を高めることができます。私が観察したのは、実際にスクロール可能になるということでした。

于 2015-07-30T00:24:38.790 に答える