Bootstrap ile tasarlanan satırlar arasındaki boşluklar nasıl azaltılabilir

Question

Bootstrap ızgara sistemi kullanıyorum, satırlar arasındaki boşlukları çok büyük olan satırlar arasındaki boşlukları azaltmak zorundayım, onu nasıl azaltabilirim. Lütfen yardım et. Teşekkürler ..

<div class="row"> 
    <div class="col-md-6"> 
    <h1 id="Heading"> Heading </h1> 
    <div class="row" style="margin-left:6px;"> 
     <div class="col-md-12"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
<div> 

Answer 1

Varsayılan olarak, satır öğeleri, oğullarıyla ilgili olarak genişler. Bu nedenle, sorununuz .row sınıfında değil. # Right

Sorununuzda, varsayılan önyükleme css'si için 1,4 satırlık bir satırınız vardır. Kimliği yerine bir sınıf yapın.

Durumunuz için 1,2'ye düşürebilirsiniz ... Bunu ayrı bir css dosyasında yapın ve üzerine yazın. Bu senin için daha iyi bir tasarım olurdu.

.rect {   
    line-height: 1.2; // overwrite it on a different css if you prefer   
} 

Answer 2

Bunun olası 2 hızlı çözüm vardır: o sayfa iskele temel işlevlerini etkileyecek kadar kötü bir fikir olacaktır

1. Düzenleme önyükleme çekirdek css/küstahlık.
2. ayrı sınıf yaz ve eski için div ekleyin:

.Row-bottom-marjı {margin-alt: 20px; }

ve gerçekten bu değişim için aradığınız sürece tüm ilgili yerlerde uygulanacak ve gelecekteki tasarımlar düşünüyorsunuz kadar Seçenek 1 önerilen değil o

<div class="row row-bottom-margin"> 

olarak kullanabilirsiniz.

Bu yardımcı olur umarız!

heyecan olarak

Answer 3

bootstap varsayılan kenar dipli vardır: 15 piksel özelliği system.You kenar özelliği, bu özelliği kaldırmak veya üzerine yazılabilir ızgara sıraları arasında yer alan

<div class= "row marginRow"></div> 
Your Css  

    .marginRow{ 
    margin-bottom:0px !important; 
    } 

veya

kullanarak herhangi bir kenar mevcut kaldırma

.marginRow{ 
    margin:0px !important; 
    } 

Answer 4

Bootstrap 4'ü kullanarak artık utility classes for this purpose olduğu için bunun için herhangi bir CSS kullanmanıza gerek kalmaz.