Bootstrap-Spalte unter col-1 teilen

Question

Ich möchte in der Lage sein, ein Bootstrap-GID noch mehr zu teilen. Ohne zu viel Aufwand oder Workarounds. Wie erstellt man am besten die Spalte 1/24 eines Rasters?

Fiddle besser zu verstehen, was ich meine: https://jsfiddle.net/Lmm1ra7d/

<div class='row'> 
    <div class="col-xs-8">8/12</div> 
    <div class="col-xs-4">4/12</div> 
</div> 

<br/> 
Now I need to transform this to a 0.5/12 => 1/24 What would be the best approach without a hacky fix. Also not to break the responsiveness. 
This is the smallest column bootstrap can make 8.3333% 
<br/> 
<br/> 

<div class='row'> 
    <div class="col-xs-1">1/12</div> 
    <div class="col-xs-11">11/12</div> 
</div> 


<br/> 
What I really want would be 4% 
<br/> 
<br/> 

<div class='row'> 
    <div style="width:3%; display: inline-block;">1/24</div><div style="width:96%;display: inline-block;">23/24</div> 
</div> 

Answer 1

Sie können nur Nest eine weitere Spalte Setup im col-*-1. Wenn das Auffüllen der verschachtelten Zeilen/Spalten nicht erwünscht ist, können Sie einfach eine Klasse hinzufügen, um das Auffüllen zu überschreiben.

<div class="row"> 
    <div class="col-xs-1"> 
     <div class="row"> 
      <div class="col-xs-6"></div> 
      <div class="col-xs-6"></div> 
     </div> 
    </div> 
</div> 

Answer 2

Sie können eine Zeile in einer Spalte verschachteln, also teilen Sie Ihre Hauptreihe grundsätzlich in andere Zeilen auf. Zum Beispiel

<div class="row"> 
    <div class="col-sm-3"> 
     <!-- now you have 1/4 --> 
     <div class="row"> 
     <div class="col-sm-3"> 
     <!-- now you have 1/4 of 1/4 --> 
     </div> 
     </div> 
    </div> 
    </div>