2017-12-06 7 views
0

나는 부트 스트랩 gid를 훨씬 더 나눌 수 있기를 바란다. 많은 번거 로움이나 해결 방법없이. 그리드의 1/24 열을 만드는 가장 좋은 방법은 무엇입니까?col-1에서 부트 스트랩 열 나누기

enter image description here

바이올린은 무슨 뜻인지 잘 이해하기 : 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> 

답변

2

할 수 있습니다 단지 중첩 col-*-1에서 다른 열 설정. 중첩 된 행/열에 대한 패딩이 원하지 않는 경우 패딩을 재정의하는 클래스를 추가하기 만하면됩니다.

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

열에 행을 중첩 할 수 있으므로 기본적으로 기본 행을 다른 행으로 나눕니다. 예 :

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