Eminim bu sorunun basit bir çözümü vardır. Temel olarak, iki sütunum varsa aralarına nasıl boşluk ekleyebilirim?
örn. eğer html ise:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Çıktı, sayfanın tüm genişliğini kaplayan yan yana iki sütun olacaktır. Diyelim ki genişlik 1000px
olarak ayarlandı, o zaman her div 500px
genişliğinde olacaktır.
İkisi arasında 100px
boşluk istersem bunu nasıl başarabilirim? Açıkçası bootstrap aracılığıyla otomatik olarak div boyutlarının her biri boşluğu telafi etmek için 450px
olacaktır
Burada belgelenen col-md-offset-*
sınıflarını kullanarak sütunlar arasında boşluk elde edebilirsiniz. Aralığın tutarlı olması sayesinde tüm sütunlarınız doğru şekilde sıralanır. Eşit aralık ve sütun boyutu elde etmek için aşağıdakileri yapardım:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
Partiye geç kaldığımı biliyorum, ancak kutuları dolgu ile boşluk bırakmayı deneyebilirsiniz.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Bir dene bakalım
Bu, iki sütun arasında bir boşluğa izin verecektir ve tabii ki varsayılan genişliği değiştirmek istiyorsanız, varsayılan bootstrap genişliğini değiştirmek için mixinlere gidebilirsiniz. Ya da satır içi CSS stilini kullanarak genişlik verebilirsiniz.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>