class="row"Twitter bootstrap çerçevesi kullanarak öğelere kenar boşluğu nasıl eklenir ?

Twitter bootstrap'taki satırı düzenlemek veya geçersiz kılmak kötü bir fikirdir, çünkü bu sayfa iskelesinin temel bir parçasıdır ve üst kenar boşluğu olmayan satırlara ihtiyacınız olacaktır.

Bunu çözmek için, bunun yerine ihtiyacınız olan standart kenar boşluğunu ekleyen yeni bir "top-buffer" sınıfı oluşturun.

.top-buffer { margin-top:20px; }

Ve sonra üst kenar boşluğuna ihtiyacınız olan satır div'lerinde kullanın.

<div class="row top-buffer"> ...

Tamam o zaman ne olduğunu size bildirmek için, Acyra yukarıda söylediği gibi bazı yeni sınıfları kullanarak sabit:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

ne zaman istersem yaparım <div class="row top7"></div>

daha iyi yanıt vermek için aşağıdakiler margin-top:7%yerine ekleyebilirsiniz 5px: D

Önyükleme 3

Bootstrap'taki satırları ayırmanız gerekiyorsa, kullanabilirsiniz .form-group. Bu, satırın altına 15 piksel kenar boşluğu ekler.

Sizin durumunuzda, kenar boşluğunu en üst düzeye çıkarmak için bu sınıfı önceki .rowöğeye ekleyebilirsiniz

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

Sen yerleşik kullanabilirsiniz sınıfları aralık

<div class="row mt-3"></div>

Sınıf adındaki "t" yalnızca "üst" taraf için geçerli kılar, alt, sol, sağ için benzer sınıflar vardır. Sayı boşluk boyutunu tanımlar.

İçin Bootstrap 4 aralık kullanılarak uygulanmalıdır

stenografi sınıfları

aşağıdaki biçimde:

{Özelliği} {taraf} - {boyutu}

Nerede mülkiyet biridir:

• m - kenar boşluğu ayarlayan sınıflar için
• p - dolgu ayarlayan sınıflar için

Nerede taraf biridir:

• t - kenar boşluğu veya dolgu üstü ayarlayan sınıflar için
• b - kenar boşluğu veya dolgu altını ayarlayan sınıflar için
• l - sol kenar boşluğu veya dolgu sol ayarı yapan sınıflar için
• r - kenar boşluğu veya dolgu sağ ayarlayan sınıflar için
• x - * -left ve * -right değerlerini ayarlayan sınıflar için
• y - hem * -top hem de * -bottom ayarlayan sınıflar için
• blank - öğenin 4 tarafında da kenar boşluğu veya dolgu oluşturan sınıflar için

Nerede boyutu biridir:

• 0 - 0'a ayarlayarak kenar boşluğunu veya dolguyu ortadan kaldıran sınıflar için
• 1 - (varsayılan olarak) kenar boşluğunu veya dolguyu $ spacer * olarak ayarlayan sınıflar için .25
• 2 - (varsayılan olarak) kenar boşluğunu veya dolguyu $ spacer * olarak ayarlayan sınıflar için.
• 3 - (varsayılan olarak) kenar boşluğunu veya dolguyu $ spacer olarak ayarlayan sınıflar için
• 4 - (varsayılan olarak) kenar boşluğunu veya dolguyu $ spacer * 1,5 olarak ayarlayan sınıflar için
• 5 - (varsayılan olarak) kenar boşluğunu veya dolguyu $ spacer * 3 olarak ayarlayan sınıflar için
• auto - kenar boşluğunu auto olarak ayarlayan sınıflar için

Yani bunlardan herhangi birini yapmalısınız:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Daha fazla açıklama için belgeleri okuyun . Buradaki canlı örnekleri deneyin .

Bazen kenar boşluğu tasarım sorunlarına neden olabilir:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Bu nedenle, "kenar boşluğu üst sınıfları" yerine "kenar boşluğu alt sınıfları" oluşturmanızı ve bunları önceki öğeye uygulamanızı öneririm.

LESS Bootstrap dosyalarını içe aktarırken Bootstrap kullanıyorsanız orantılı Bootstrap Tema alanlarına sahip kenar boşluğu sınıflarını tanımlamaya çalışın:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Bu sınıfları bootstrap stil sayfama ekledim

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Misal

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Üst kenar boşluğunu değiştirmek için bu sınıfları kullanıyorum:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Yukarıdaki öğeden 2em aralığı için bir öğeye ihtiyacım olduğunda bunu şöyle kullanın:

<div class="row margin-top-20">Something here</div>

Pikselleri tercih ediyorsanız, em'i piksele dönüştürün.

Bootstrap 4 için aşağıdaki sınıfı kullanabilirsiniz:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

4 kenar boşluğu için Bootstrap 4 alfa: steno CSS sınıf adları mt-1, mt-2 (mt-lg-5, mt-sm-2) alt, sağ, sol için aynıdır ve ayrıca otomatik sınıf ml- Oto

    <div class="mt-lg-1" ...>

Birimler gelmektedir 1için 5: Eğer mt-1 o marj üst .25rem verir ayarlarsanız vasıta variables.scss içinde.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

buradan daha fazla oku

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Bu sınıfa .css dosyasında ekleyin:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

veya yeni bir sınıf yapın ve öğeye ekleyin

.rowSpecificFormName td {
    margin-top: 50px;
}

Yalnızca bir sayfada değiştirmek isterseniz, aşağıdaki stil kuralını ekleyin:

 #myCustomDivID .row {
     margin-top:20px;
 }

Bootstrap 4 alpha + 'da bunu kullanabilirsiniz

class margin-bottom-5

Sınıflar şu format kullanılarak adlandırılır: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (yalnızca cilt payı, kenar boşlukları olmadan):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (yaklaşık eşit kenar boşluğu, 15 piksel / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Kullanımı:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(SASS veya LESS 15px ile önyüklemeden bir değişken olabilir)

<div class="row row-padding">

basit kod

bu kodu ekleyebilirsiniz:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Sadece bu bs3-upgradeyardımcıyı boşluklar ve metin hizalaması için kullanın ...

https://github.com/studija/bs3-upgrade

BootStrap 3.3.7 kullanıyorsanız, NPM üzerinden açık kaynak kitaplık bootstrap-spacer'ı kullanabilirsiniz

npm install bootstrap-spacer

veya github sayfasını ziyaret edebilirsiniz:

https://github.com/chigozieorunta/bootstrap-spacer

Bunun .row-spacer sınıfını kullanarak boşluk satırlarında nasıl çalıştığına bir örnek:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Sütunlar arasında boşluk olmasını istiyorsanız, .row-col-spacer sınıfını da ekleyebilirsiniz:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Ayrıca çeşitli .row-spacer ve .row-col-spacer sınıflarını bir araya getirebilirsiniz:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Benim numaram. Çok temiz değil, ama benim için iyi çalışıyor

<p>&nbsp;</p>