Twitter Bootstrap - Sıralı sorunla sorun bildirme

Question

Twitter bootstrap'i kullanarak bir web sitesi hazırlıyorum (bu harika!). kullanıyorum düzeni vardı: harika çalışıyor

<div class="row"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

, temelde satır başına 2 renklendirilmiş ve biz marjlar kurtulmak için bizim döngüde bir sayaç dahil etmek zorunda değildi. Kusursuzdu! Ama fikrimizi sabit bir yerleşim düzeni hakkında değiştirmeye karar verdik, bu yüzden .row'dan .row-fluid'a geçtim. Ve sorun geldiğinde budur.

Böyle bir şey var biliyorum:

<div class="row-fluid"> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
    <div class="span6"></div> 
</div> 

Ve de ilk satır için .span6 çalışma ile div 's, ama sonra margin-left .span6 ikinci satırdan başlayarak gösteriliyorsa, bu nedenle düzen, iyi, ... iyi değil.

yapıyorum, sabit düzen için harika çalışıyor ancak satır sıvı. Bunun için bir iş var mı? Bunu tüm sitemde kullandım, bu yüzden hepsine sayaç eklemek zorunda kaldım ... çok fazla iş. http://jsfiddle.net/denislexic/uAs6k/3/

takdir Herhangi bir yardım, teşekkürler: Burada

JS Fiddle olduğunu.

Answer 1

Eğer numarasını biliyorsanız Her satırın kapsamı için şu şekilde bir ifade kullanabilirsiniz:

.row-fluid [class*="span"]:nth-child(3n+1) { 
    margin-left: 0; 
} 

Örneğin: her satır için 3 perdeniz varsa, yukarıdaki ifade her satırın ilk açıklığından marjı kaldırır.

.row-fluid [class*="span"]:nth-child(3n+3) { 
    margin-right: 0; 
} 

Answer 2

.row-fluid [class*="span"]:first-child { 
margin-left: 0; 
} 

başka sınıf eklemek gerekir ya margin-left:0;

Answer 3

Sizin 2 örnekler var span6 değişecek yüzden sadece ilk çocuk için marjını kaldırır aslında tam genişlikli 'sıranın' içinde 4 <div class="span6"></div> var .. 12 sütun ızgara kurulumuna dayanan '24' ya da 'satır' ya da 'satır-sıvı' için genişliğin iki katı. Ebeveyn sırasının genişliğine sığmayacak kadar çok olduğunda, temel olarak şamandıralar oluşturuyorsunuz.

: (. Sizin öncelikle bir 2 satır 'span6' gibi görünüyor ki , 3 'span6' olarak uygulanmıyor o 0 margin-left 'görünüyor neden de budur) Varsayılan/sabit 'satır''da, iç içe geçmiş sütunun 'span *' s + 'offset *' lerinin, üst düzey sütununun 'span *' değerinden küçük veya ona eşit olması gerekir, VEYA birinci düzey bir satırsa Daha sonra 12, çünkü süzülmüş 'span *' genişlikleri piksel cinsindendir. esnek/akıcı satır sıvı ' olarak

, sütun genişlikleri yüzde ile ayarlanır, böylece her satır ve iç içe satır sütun iç içe olabilir 'yayılma *' in ve toplayın 'ofset *' in 12, her seferinde. Bu, sorununuzu 'satır-sıvı' kurulumuyla çözmelidir. http://jsfiddle.net/csabatino/uAs6k/9/

<h1>NOW this is working.</h1> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row-fluid"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 


<h1>Default fixed 'row' is working, too.</h1> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 
<div class="row"> 
    <div class="span6">Content</div> 
    <div class="span6">Content</div> 
</div> 

Answer 4

uygulama elemanlarını saymak ve margin-left kaldırıp padding-right ekleyerek satırlara bölmek yapamıyorsanız benim için sadece iyi çalıştı:

.gal [class*="span"] {margin-left:0; padding-right:20px;} 

http://jsfiddle.net/uAs6k/116/

Answer 5

Ben sadece yerine jQuery ile yaptı: Ve aşağıdaki birer satırda son öğe için margin-right kaldırır

$(document).ready(function(){ 
    function doFluidFirstSpan() { 
     var top = $('.thumbnails > li:first-child').position().top; 
     $('.thumbnails > li').each(function(){ 
      if($(this).position().top > top) { 
       $(this).addClass("alpha"); 
       top = $(this).position().top; 
      } 
     }); 
    } 

    doFluidFirstSpan(); 
} 

ve css:

.alpha { margin-left: 0 !important; } 

Answer 6

Ben span12 ile boş bir div koyarak, kod içinde uggly kod koyarak ama bir http://jsbin.com veya http: // jsfi gui