Spaltenbreite in Bootstrap

Question

bitte Geduld mit mir, wenn dies eine einfache Frage ist (ich bin ein iOS-Entwickler versuchen, CSS-Bootstrap zu lernen

ich zum ersten Mal mit Reihen gespielt.

 <div class="row"> 
     <div class="col col-1"> 
      <p>Plan</p> 
     </div> 
     <div class="col col-2"> 
      <p>Date</p> 
     </div> 
     <div class="col col-2"> 
      <p>Person</p> 
     </div> 
     <div class="col col-3"> 
      <p>Description</p> 
     </div> 
     <div class="col col-1"> 
      <p>Time</p> 
     </div> 
     <div class="col col-3"> 
      <p>Line</p> 
     </div> 
     </div> 

und dies perfekt war:

ich das gleiche mit Tischen dann versucht zu tun, zunächst ohne die Spalten für die Netzeinstellung:

<div class="container-fluid"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th">Plan</th> 
        <th">Date</th> 
        <th>Person</th> 
        <th>Description</th> 
        <th>Time</th> 
        <th>Line</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> <input type="checkbox" name="Plan"> </td> 
        <td> <input type="date" name="date"> </td> 
        <td> <input type="text"></td> 
        <td> <input type="text"></td> 
        <td> <input type="time"></td> 
        <td> <input type="text"></td> 
       </tr> 
        <tr> 
        <td> <input type="checkbox" name="Plan"> </td> 
        <td> <input type="date" name="date"> </td> 
        <td> <input type="text"></td> 
        <td> <input type="text"></td> 
        <td> <input type="time"></td> 
        <td> <input type="text"></td> 

      </tbody> 
     </table> 
    </div> 

Nicht schlecht, aber ich mag einige Spalten kleiner sein (Plan, Zeit, Datum) und andere größer zu sein. So habe ich die Klassen für diese Spalten (genau wie ich, wenn sie mit Reihen zu experimentieren.

<div class="container-fluid"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th class="col col-1">Plan</th> 
         <th class="col col-2">Date</th> 
         <th class="col col-2">Person</th> 
         <th class="col col-3">Description</th> 
         <th class="col col-1">Time</th> 
         <th class="col col-3">Line</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="col col-1"> <input type="checkbox" name="Plan"> </td> 
         <td class="col col-2"> <input type="date" name="date"> </td> 
         <td class="col col-2"> <input type="text"></td> 
         <td class="col col-3"> <input type="text"></td> 
         <td class="col col-1"> <input type="time"></td> 
         <td class="col col-3"> <input type="text"></td> 
        </tr> 
         <tr> 
         <td class="col col-1"> <input type="checkbox" name="Plan"> </td> 
         <td class="col col-2"> <input type="date" name="date"> </td> 
         <td class="col col-2"> <input type="text"></td> 
         <td class="col col-3"> <input type="text"></td> 
         <td class="col col-1"> <input type="time"></td> 
         <td class="col col-3"> <input type="text"></td> 

       </tbody> 
      </table> 
     </div> 

Aber zu meiner Überraschung Die erste Spalte (Plan) war viel größer (und nicht weniger) und die andere alle blieben die gleich:..

ich habe versucht, mit der sowohl Kopf- und Körper (wie Code oben) und nur in Kopfeinstellung das Ergebnis war die gleiche

Answer 1

das Wichtigste zuerst, ist das erste Tabellenelement (Plan) viel größer, wenn Sie Säulen wegen "Container-Flüssigkeit" verwenden. Versuchen Sie nur "Container". Per der Dokumentation "con tainer-fluid "ist voller Breite, was bedeutet, dass es sich ausdehnt, um den Bildschirm zu füllen.

Als nächstes sind Spalten nicht das, was Sie benötigen, um die Tabellenelemente kleiner zu machen.

Das Top-Layout ist mit Spaltenklassen mit der Tabelle. Das untere Layout ist ein Standard-Tabellenlayout ohne Spaltenklassen. Wie Sie sehen können, ist die kleinstmögliche Spaltenbreite (col-1) größer als die Standardgröße für die Tabellenelemente. Wenn Sie möchten, dass etwas kleiner ist als das (die Standardgröße für die Tabelle), müssen Sie sich mit der Dimensionierung der Tabelle herumschlagen. (Einstellung des padding-right oder padding-left für bestimmte td-Elemente 0rem hilft den überschüssigen Abstand zum Beispiel trim)

mein Code für die "columned" Tabelle:

<div class="container"> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th class="col-xl-1">Plan</th> 
       <th class="col-xl-2">Date</th> 
       <th class="col-xl-2">Person</th> 
       <th class="col-xl-3">Description</th> 
       <th class="col-xl-1">Time</th> 
       <th class="col-xl-3">Line</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="col-xl-1"> <input type="checkbox" name="Plan"></td>  
       <td class="col-xl-2"> <input type="date" name="date"> </td> 
       <td class="col-xl-2"> <input type="text"></td> 
       <td class="col-xl-3"> <input type="text"></td> 
       <td class="col-xl-1"> <input type="time"></td> 
       <td class="col-xl-3"> <input type="text"></td> 
      </tr> 
      <tr> 
       <td class="col-xl-1"> <input type="checkbox" name="Plan"> </td> 
       <td class="col-xl-2"> <input type="date" name="date"> </td> 
       <td class="col-xl-2"> <input type="text"></td> 
       <td class="col-xl-3"> <input type="text"></td> 
       <td class="col-xl-1"> <input type="time"></td> 
       <td class="col-xl-3"> <input type="text"></td> 
     </tbody> 
    </table> 
</div> 

Durch die Art, wie ich bin mit bootstrap Version 4 alpha 6. Wenn Sie eine niedrigere Bootstrap-Version verwenden, ersetzen Sie alle Instanzen von "col-xl- #" durch "col-lg- #". Der neueste Bootstrap hat xl als größte Größe.