Twitter Bootstrap kullanarak dikey boşluk eklensin mi?

Twitter'ın Bootstrap'ini kullanarak dikey boşluk eklemenin en iyi yolu nedir?

Örneğin, bir açılış sayfası oluşturduğumu ve belirli bir düğmenin üstünde ve altında biraz (100 piksel) boş boşluk olmasını istediğimizi varsayalım. Açıkçası, o düğme için belirli bir sınıf oluşturabilirim. Ancak, Bootstrap'in dikey boş alanlara KURU bir şekilde eklenmesi gerektiğini düşünürüm .

Gelen Bootstrap 4 vardır aralık Utilites .

Gerekçe kullanılan gösterimde belgelerine :

Kadar tüm kesme noktaları için geçerli Aralığı programları xsiçin xl, onlara hiçbir kesme noktası kısaltmaya sahiptir. Bunun nedeni, bu sınıfların yukarıdan min-width: 0ve yukarıdan uygulanması ve dolayısıyla bir medya sorgusu ile bağlı olmamasıdır. Bununla birlikte, geri kalan kesme noktaları bir kesme noktası kısaltması içerir.

Sınıflar biçimini kullanarak adlandırılır {property}{sides}-{size}için xs ve {property}{sides}-{breakpoint}-{size}için sm, md, lg, ve xl.

Nerede mülkiyet biridir:

• m - ayarlanan sınıflar için margin
• p - ayarlanan sınıflar için padding

Nerede taraf biridir:

• t- ayarlanan sınıflar için margin-topveyapadding-top
• b- ayarlanan sınıflar için margin-bottomveyapadding-bottom
• l- ayarlanan sınıflar için margin-leftveyapadding-left
• r- ayarlanan sınıflar için margin-rightveyapadding-right
• x- her ikisini birden ayarlayan sınıflar *-leftve*-right
• y- her ikisini birden ayarlayan sınıflar *-topve*-bottom
• blank - öğenin 4 tarafına marginveya paddingtüm tarafına ayarlanan sınıflar için

Nerede boyutu biridir:

• 0 - kenar boşluğunu veya dolguyu, 0
• 1- (varsayılan olarak) marginveya öğesini ayarlayan sınıflar paddingiçin$spacer * .25
• 2- (varsayılan olarak) marginveya öğesini ayarlayan sınıflar paddingiçin$spacer * .5
• 3- (varsayılan olarak) marginveya öğesini ayarlayan sınıflar paddingiçin$spacer
• 4- (varsayılan olarak) marginveya öğesini ayarlayan sınıflar paddingiçin$spacer * 1.5
• 5- (varsayılan olarak) marginveya öğesini ayarlayan sınıflar paddingiçin$spacer * 3

Bu nedenle, bir öğenin üstünde ve altında fazladan dikey boşluk elde etmek için my-5sınıfı kullanırsınız .

V2'de, bu kadar dikey alan için yerleşik bir şey yoktur, bu nedenle özel bir sınıfa bağlı kalmak istersiniz. Daha küçük yükseklikler için, genellikle sadece <div class="control-group">bir düğmeye atarım .

Sarma işe yarıyor, ancak sadece bir alan istediğinizde, beğendim:

<div class="col-xs-12" style="height:50px;"></div>

Burada eski bir mezar kazdığımız için üzgünüm, ama neden sadece bunu yapmıyorsun?

<div class="form-group">
    &nbsp;
</div>

Normal form öğesinin yüksekliğine boşluk ekleyecektir.

Bir formdaki yaklaşık 1 satır kabaca 50 piksel (az önce incelediğim öğemde 47 piksel) gibi görünüyor. Bu, sol 2col etiketli ve sağ 10col girişli yatay bir formdur. Yani pikselleriniz değişebilir.

Benimki temelde 50 piksel olduğundan, kenar boşluğu veya dolgu olmadan 50 piksel uzunluğunda bir aralayıcı oluşturacağım;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

Bunun eski olduğunu biliyorum, ama buraya aynı şeyi aramak için geldim, Bootstrap'ın yardım bloğuna sahip olduğunu gördüm, bu durumlar için çok kullanışlı:

<div class="help-block"></div>

Sürüm 3 için bu düzgün bir şekilde başarmak için "bootstrap" yolu yok gibi görünüyor.

A panel, a wellve form-grouptümü bir miktar dikey boşluk sağlar.

Daha resmi bir spesifik dikey boşluk çözümü, görünüşe göre, bootstrap v4 için yol haritasında

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

Sadece çeşitli yükseklikleri kullanarak bir div sınıfı yarattım.

<div class="divider-10"></div>

CSS:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Sadece yüksekliğe ihtiyaç duyulan şey için bir bölücü sınıfı oluşturun.

Benim numaram. Zarif değil, ama işe yarıyor:

<p>&nbsp;</p>

Sadece kullan <br/>. Kendimi burada bu sorunun cevabını ararken buldum ve bir yorumda kullanıcı JayKilleen tarafından önerildiği gibi basit bir satır sonu kullanmayı düşünmediğim için aptalca hissettim.

Bunun eski olduğunu biliyorum ve zaten birkaç iyi çözüm var, ama benim için çalışan basit bir çözüm aşağıdaki CSS

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

ve sonra html'nizde bir div oluşturun

<div class="divider"></div>

Kullanmayı denedim <div class="control-group">ve düzenimi değiştirmedi. Dikey boşluk eklemedi. Benim için işe yarayan çözüm:

<ol style="visibility:hidden;"></ol>

Bu size yeterli dikey alan sağlamazsa, iç içe <li>&nbsp;</li>etiketler ekleyerek aşamalı olarak daha fazla yararlanabilirsiniz .

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

Daha kuru bir şey yok

.btn {
    margin-bottom:5px;
}