bootstrap 12 ızgaradan daha az olan 3.0 ızgara

Question

Sadece 7 sütun içeren ızgara kullanarak bir takvim oluşturmaya çalışıyorum. Bu 7 sütunun eşit aralıklı olmasını ve tüm sıraya uymasını istiyorum. Şu anda, 7 sütun 12'ye kadar eklemez ve ben 5 boş ile 12 sütun alır. Bootstrap 3'te, tüm 7 forma yayılmak için bir yol var mı?

Answer 1

Kısa cevap: gerçekten değil belki? Ancak bu tür çözümlere bazı uyarı her zaman vardır:

From Grid description:

Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport. 

sayı 12 yüksek yönlülük nedeniyle seçildi (1,2,3,4,6 veya 12 sütun sahip olabilir): standartlarına uygunluk gerektirirler.

Şimdi, böyle 7 div oluşturduğunuzda ne olur? <div class="col-md-1">? Hızlı bir test yaptım ve 7 sütun var. Elbette konteyner genişliğimin sadece 7/12'sini alıyorlar - bu kabul edilebilirse, o zaman onunla yuvarlayabilirsiniz. Aksi takdirde, ya kendi çözümünüzü (ya mevcut önyükleme sınıflarını kullanarak ya da boştan başlayarak) kullanmanız, önyükleme biçimini değiştirmeniz (olası, ancak daha ileride bakım için sorun yaratması nedeniyle öneride bulunacağım), veya tasarımınızı değiştirin. Ya da sadece başka bir bileşen/şablon kullanın?

Answer 2

En iyi bahsiniz muhtemelen kendi özel sütun sınıfınızı oluşturmaktır. Ebeveyninin genişliğinin 1/7'sini kapsayan bir sütun istediğinizden, width:14.285%; (100 = 7 = 14.285 ...) kullanın.

DEMO http://www.bootply.com/uakh14tkuX

CSS

.col-day{ 
    width:14.285%; 
    border:1px solid grey; 
    float:left; 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
    } 

HTML

CSS bölümü, şamandıra, pozisyonda

<div class="container"> 
    <div class="row bg-success"> 
    <div class="col-day">Sun</div> 
    <div class="col-day">Mon</div> 
    <div class="col-day">Tue</div> 
    <div class="col-day">Wed</div> 
    <div class="col-day">Th</div> 
    <div class="col-day">Fr</div> 
    <div class="col-day">Sat</div> 
    <div class="col-day">Sun</div> 
    <div class="col-day">Mon</div> 
    <div class="col-day">Tue</div> 
    <div class="col-day">Wed</div> 
    <div class="col-day">Th</div> 
    <div class="col-day">Fr</div> 
    <div class="col-day">Sat</div> 
    </div> 
</div> 

, doldurma başka önyükleme col aynıdır yükseklikte-min ve -sınıf. Genişlik ve sınır tek gerçek yönleri. Ama aynı zamanda farklı büyüklükteki cihazlarda ne olduğunu düşünmek istersiniz - bu çözüm, birleşik col-sınıflarının birleşimine cevap vermiyor ...

Answer 3

Neden 7 ile 14 arası çift değil? Bir çift sayı tutmak çok daha basit. Bu şekilde, 7 sütuna kadar uzanan bir düzen oluşturabilirsiniz. Örneğin, eğer bir col-3 ve col-4 mizanpajı istiyorsanız, sadece col-6 ve col-8 yaparsınız. Bir takvim için, bu her gün bir col-2 sınıfı alacağı anlamına gelir.

Ayrıca istediğiniz her zaman sadece sayfayı özelleştirmek Bootstrap gidip sütun sayısı girebilirsiniz olsa Bootstrap adlı Mixins daha iyi anlamak daha kolay olabilir https://github.com/zirafa/bootstrap-grid-only check out: http://getbootstrap.com/customize/