webentwicklung-frage-antwort-db.com.de

Mehr als 12 Bootstrap-Spalten mit horizontaler Bildlauffunktion

Ich versuche, eine Tabelle mit einem Bootstrap-Grid-System zu erstellen. Ich weiß, dass wir nur 12 Spalten pro Zeile verwenden sollten. Ich wollte aber mehr als 12 Spalten mit horizontaler Bildlauffunktion für die gesamte Tabelle haben. Also versuche ich es mit dem folgenden Code-Snippet

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

Ich wollte 8 Felder wie oben erwähnt in einer Zeile anzeigen. Nach Feld 6 kommen noch zwei andere Felder herunter. Gibt es eine Möglichkeit, alle 8 Felder in einer Zeile mit horizontalem Bildlauf zu haben.

12
newbie

Vier Tricks mit dem Bootstrap-Gitter

1) 8 Spalten

Sie können verschachtelte Raster verwenden. Ohne Tabellen oder Anpassungen. Zum Beispiel:

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

2) Blättern Sie

Erhöhen Sie die Breite der Hauptzeile, wenn Sie horizontalen Bildlauf hinzufügen möchten:

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll > .row {
    width: 133.33333333%; /* = 100% * 4/3 */
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <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>

3) Verschiedene Spaltenanzahl

Wenn jede Zeile mehrere Spalten hat, ist die Anzahl der Spalten jedoch im Voraus bekannt.

In diesem Fall können sich die Reihen um die Breite unterscheiden. Daher ist es notwendig, die Breite der Spalten relativ zur Bildschirmbreite und nicht die Breite der Zeile festzulegen. 

  1. verwenden Sie vw anstelle von %
  2. spezielle Breite für die Zeile festlegen, wenn sie breiter ist als 100vw

@media (min-width: 992px) {
  .container-scroll {
    overflow-x: auto;
  }
  .container-scroll .columns-16 {
    width: 133.33333333vw;  /* = 100vw * 16/12 */
  }
  .container-scroll .columns-24 {
    width: 200vw;  /* = 100vw * 24/12 */
  }
  .container-scroll .col-md-2 {
    width: 16.66666667vw !important;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row columns-16">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row columns-24">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>
</div>
  
<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

4) Unbekannte Spaltenanzahl

Konvertieren Sie Spalten in Inline-Blöcke, wenn Sie die Anzahl der Spalten in einer Zeile nicht kennen.

@media (min-width: 992px) {
  .container-scroll > .row {
    overflow-x: auto;
    white-space: nowrap;
  }
  .container-scroll > .row > .col-md-2 {
    display: inline-block;
    float: none;
  }
}

.container-scroll > .row {
  margin-top: 24px;
}
.container-scroll > .row > .col-md-2 {
  font-weight: bold;
  text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid container-scroll">
  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
    <div class="col-md-2">Field 5</div>
    <div class="col-md-2">Field 6</div>
    <div class="col-md-2">Field 7</div>
    <div class="col-md-2">Field 8</div>
    <div class="col-md-2">Field 9</div>
    <div class="col-md-2">Field 10</div>
    <div class="col-md-2">Field 11</div>
    <div class="col-md-2">Field 12</div>
  </div>

  <div class="row">
    <div class="col-md-2">Field 1</div>
    <div class="col-md-2">Field 2</div>
    <div class="col-md-2">Field 3</div>
    <div class="col-md-2">Field 4</div>
  </div>
</div>

20
Gleb Kemarsky

Um mehr Spalten zu erhalten:

Sie können hier eine eigene Bootstrap-Variante erstellen: http://getbootstrap.com/customize/ Hier können Sie die Anzahl der Spalten einstellen, die das Rasterlayout verwendet, sowie fast jede andere Anpassung des CSS vor dem Herunterladen. Installieren und Verwenden dieser (neuen) Vorlage auf Ihrer Website.

Einfach.

Wenn Sie Lust auf eine Herausforderung haben und ein paar Stunden Zeit haben, um zu töten, können Sie die Bootstrap.css-Datei öffnen, manuell neue CSS-Elemente hinzufügen und die width [percent] -Parameter für jede Spaltendefinition neu ausrichten. 

Tabellen horizontal scrollen

Die Grundvoraussetzung von bootstrap ist, dass nichts den Bildschirm überläuft, egal was passiert. Wenn Sie speziell do wollen, dass die Dinge überlaufen, sollten Sie entweder keinen Bootstrap verwenden, oder Sie müssen einige Einstellungen im CSS manuell anpassen. Ich verweise Sie wieder auf http://getbootstrap.com/anpassen/ which könnte eine Lösung haben, ansonsten können Sie CSS untersuchen und einige CSS-Parameter in der Bootstrap-Vorlagendatei festlegen.

Möglicherweise gibt es eine vordefinierte Bootstrap-Table-CSS-Klasse, die Sie für solche Zwecke verwenden können. Haben Sie die Bootstrap-Dokumentation untersucht?

Oder Durchsuchen anderer Fragen zu Stack Overflow kann Ihnen nützliche Antworten geben, um dies manuell durchzuführen.

1
Martin

Sie können Bootstrap col-12 in 2 aufteilen. Sie haben jetzt 24 Spalten

    <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