Bootstrap Cards - Wrap und Cardgröße

ny_unity · 29. August 2024

Hallo zusammen,

ich versuche verzweifelt bei Bootstrap mit Cards zu arbeiten, genauer genommen mit card-columns

Von w3 habe ich folgenden Code mir kopiert:

Spoiler anzeigen

Das sieht auch gut aus wenn man nicht viel Inhalt hat.

Jetzt möchte ich aber in die Cards responsive Tables reinbekommen, soll eine Art Dashboard werden.

Wenn ich meine responsive Table:

Spoiler anzeigen

reinnehme, bleibt die Card auf der Größe, wird nicht größer.

Es sollen quasi die Cards so groß werden wir deren Inhalt, ist der Platz in der Reihe gefüllt mir Cards und deren Größe, dann soll es eine Zeile weiter darunter weiter gehen.

Ich schaffs einfach nicht, hänge zwei Tage dran...

Hat jemand eine Idee?

Danke,

Erik

ny_unity · 29. August 2024

Hier, wie es gerade ist:

pasted-from-clipboard.png

die Erste Karte könnte doch breiter sein, die ganz hinten könnten doch unter die erste rutschen..

hier der code:

Spoiler anzeigen

Code

  <body>
    <div class="container-fluid" id="dashboard-startseite">
      <div class="card-columns">
        <div class="card bg-primary">
          <div class="card-body text-center">
            <div class="table-responsive">
             <table class="table mb-0">
               <tbody>
                 <tr>
                   <th scope="col">Team</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">XX</th>
                   <th scope="col">&#8721;</th>
                 </tr>
                 <tr>
                   <td>XXX</td>
                   <td>1</td>
                   <td>4</td>
                   <td>4</td>
                   <td>1</td>
                   <td>0</td>
                   <td>1</td>
                   <td>2</td>
                   <td>13</td>
                 </tr>
                 <tr>
                   <td>XXX</td>
                   <td>1</td>
                   <td>5</td>
                   <td>4</td>
                   <td>0</td>
                   <td>0</td>
                   <td>1</td>
                   <td>2</td>
                   <td>13</td>
                 </tr>
                 <tr>
                   <td>XXX</td>
                   <td>1</td>
                   <td>5</td>
                   <td>4</td>
                   <td>0</td>
                   <td>0</td>
                   <td>6</td>
                   <td>0</td>
                   <td>14</td>
                 </tr>
                 <tr>
                  <td>XXX</td>
                  <td>1</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                  <td>0</td>
                  <td>1</td>
                </tr>
               </tbody>
               <tfoot>
                 <tr>
                  <td>Summe</td>
                  <td>4</td>
                  <td>13</td>
                  <td>11</td>
                  <td>1</td>
                  <td>0</td>
                  <td>8</td>
                  <td>4</td>
                  <td>41</td>
                </tr>
               </tfoot>
             </table>
           </div>
          </div>
        </div>
        <div class="card bg-warning">
          <div class="card-body text-center">
            <div class="table-responsive">
              <table class="table mb-0">
                <thead>
                  <tr>
                    <th scope="col">YY</th>
                    <th scope="col">Anzahl</th>
                    <th scope="col">Anteil</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <tdZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>12</td>
                    <td>8,16%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>147</td>
                    <td>100,00%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>5</td>
                    <td>3,40%</td>
                  </tr>
                  <tr>
                    <td>ZZZ</td>
                    <td>4</td>
                    <td>-2,72%</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
        <div class="card bg-success">
          <div class="card-body text-center">
            <p class="card-text">Some text inside the third card</p>
          </div>
        </div>
        <div class="card bg-danger">
          <div class="card-body text-center">
            <p class="card-text">Some text inside the fourth card</p>
          </div>
        </div>
        <div class="card bg-light">
          <div class="card-body text-center">
            <p class="card-text">Some text inside the fifth card</p>
          </div>
        </div>
        <div class="card bg-info">
          <div class="card-body text-center">
            <p class="card-text">Some text inside the sixth card</p>
          </div>
        </div>
      </div>
    </div>
  </body>

Alles anzeigen

Sempervivum · 31. August 2024

Warum bestehst Du denn darauf, das mit Bootstrap zu machen? An den ausbleibenden Antworten erkennst Du ja, dass niemand Interesse daran hat.

Und bei deiner vorigen Frage hast Du gesehen, dass die Aufgabe mit wenigen Zeilen CSS zu lösen war, ohne eine Inflation an Container wie man es von Bootstrap kennt.

Bootstrap war vor 10, 15 Jahren eine gute Sache aber heute veraltet und überflüssig.

Siehe auch hier:

Should I learn Bootstrap?

Bootstrap Cards - Wrap und Cardgröße

Jetzt mitmachen!

Teilen