web-dev-qa-db-ja.com

Twitterで動的な幅の列を作成する方法Bootstrap

Twitter Bootstrap=を使用して、テーブルのようなリスト構造を作成するにはどうすればよいですか？スペース？

例えば：

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

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

Name列は、Christineという名前を入れるのに十分なスペースを取ります。

Email列は残りのスペースを取ります。

javascripthtmlcsstwitter-bootstrapstylesheet
32
Elad

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

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

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

グリッドシステムの使用

bootstrap grid system に関するドキュメントでは、自動幅構築ブロックが見つかりませんでした。箱から出したものはすべて、特定の幅と固定数の列を持っています。

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

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

My demo では、スペースが狭くなる場合はグリッド列が折り返され、スペースが広すぎる場合は列が引き伸ばされます。

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

デモ をカスタムクラスで更新しました。創造的なマークアップは、探しているものに近い

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

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

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

bootstrap documentation を理解している限り、autoと残りの幅を持つ3列レイアウトの組み込みsoultionはありません。ブートストラップのレスポンシブデザインページを引用するには：「メディアクエリを責任を持って、モバイルユーザーへのスタートとしてのみ使用します。大規模プロジェクトでは、メディアクエリのレイヤーではなく、専用のコードベースを検討してください。」

テーブルを使用できない理由を詳しく説明してください。

27
surfmuggle

他の人が言ったように、あなたは彼らが理にかなっている通常のテーブルを使用する必要があります。また、CSS3のdisplay：tableは良い解決策です。

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

（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」を使用して、特定の画面幅をターゲットにします。

制限事項

長いテキストを入力すると、左/右の列が全幅に拡張されます。画像などの固定幅のものに使用する方が適切です。

中央の列には、十分なコンテンツがある場合にのみ使用可能な幅全体が使用されます。

9
donquixote

limit列サイズを必要としない場合は、幅を無効にできます。

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

他の列のプロパティ（パディング、高さなど）のbootstrap定義が必要です。そのため、col定義を追加しましたが、小さな単位（col-xs-1）を追加しました。

ノート：

  • 「！important」句が削除される可能性があります（わかりません）
  • 私のプロジェクトでは、テキストはとにかく小さいことが知られています。
4
Berry Tsakala