web-dev-qa-db-ja.com

12を超えるbootstrap=水平スクロールの列

bootstrapグリッドシステムを使用してテーブルを作成しようとしています。行ごとに12列のみを使用する必要があることを知っています。しかし、テーブル全体を水平スクロールする12列。だから私は次のコードスニペットで試しています

<span class="col-md-2" style="text-align: center;"><b>Field 1</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 2</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 3</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 4</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 5</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 6</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 7</b></span>
<span class="col-md-2" style="text-align: center;"><b>Field 8</b></span>

上記のような8つのフィールドを1行で表示したかったのです。しかし、フィールド6の後、他の2つのフィールドがダウンしています。水平スクロールを使用して、8つのフィールドすべてを1行で表示する方法はありますか。

htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout
14
newbie

さらに列を取得するには：

独自のBootstrapここからのバリエーションを作成できます： http://getbootstrap.com/customize/ グリッドレイアウトが使用する列の数も設定できますWebサイトでこの（新しい）テンプレートをダウンロード、インストール、使用する前のCSSのカスタマイズとほぼ同じです。

簡単です。

または、チャレンジが好きで、殺すのに数時間かかった場合は、Bootstrap.cssファイルを作成し、新しいCSS要素を手動で追加し、各列定義のwidth [percentage]パラメーターを再調整します。

テーブルの水平スクロール

bootstrapの全体的な前提は、何があっても画面から何もオーバーフローしないことです。具体的にdoしたい場合オーバーフローする場合は、bootstrapを使用しないでください。または、CSSの設定を手動で調整する必要があります。もう一度、 http：// getbootstrap .com/customize / whichmightには解決策があります。それ以外の場合は、CSSを調べてbootstrapテンプレートファイル。

事前定義されたbootstrap table css classがそのようなものに使用できるかもしれません。あなたは Bootstrap documentation ？

または スタックオーバーフローに関する他の質問を検索する は、これを手動で行うための有用な回答を提供します。

1
Martin

bootstrap col-12 in 2.に分割できます。24列になりました。

    <div class "row">
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            1
          </div>
          <div class="col-1">
            2
          </div>
          <div class="col-1">
            3
          </div>
          <div class="col-1">
            4
          </div>
          <div class="col-1">
            5
          </div>
          <div class="col-1">
            6
          </div>
          <div class="col-1">
            7
          </div>
          <div class="col-1">
            8
          </div>
          <div class="col-1">
            9
          </div>
          <div class="col-1">
            10
          </div>
          <div class="col-1">
            11
          </div>
          <div class="col-1">
            12
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class "row">
          <div class="col-1">
            13
          </div>
          <div class="col-1">
            14
          </div>
          <div class="col-1">
            15
          </div>
          <div class="col-1">
            16
          </div>
          <div class="col-1">
            17
          </div>
          <div class="col-1">
            18
          </div>
          <div class="col-1">
            19
          </div>
          <div class="col-1">
            20
          </div>
          <div class="col-1">
            21
          </div>
          <div class="col-1">
            22
          </div>
          <div class="col-1">
            23
          </div>
          <div class="col-1">
            24
          </div>
        </div>
      </div>
    </div>
0
Alan
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 1</b></div>
        <div class="col-md-6"><b>Field 2</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 3</b></div>
        <div class="col-md-6"><b>Field 4</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 5</b></div>
        <div class="col-md-6"><b>Field 6</b></div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="row text-center">
        <div class="col-md-6"><b>Field 7</b></div>
        <div class="col-md-6"><b>Field 8</b></div>
      </div>
    </div>
  </div>
</div>
0
anupriya