Ben

Question

My düzeni sarma olmadan önyükleme sütunları arasında bir marj nasıl eklerim şu anda görünüyor. CSS bir marj eklersek, bu satır kaydırma biter ve ben yaparak marjları ekleme girişiminde

.server-action-menu { 
    background-color: transparent; 
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); 
    background-repeat: repeat; 
    border-radius:10px; 
} 

.info-panel { 
    padding: 4px; 
} 

bu

<div class="row info-panel"> 
    <div class="col-md-4 server-action-menu" id="server_1"> 
     <div> 
      Server 1 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_2"> 
     <div> 
      Server 2 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_3"> 
     <div> 
      Server 3 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_4"> 
     <div> 
      Server 4 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_5"> 
     <div> 
      Server 5 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_6"> 
     <div> 
      Server 6 
     </div> 
    </div> 
    <div class="col-md-4 server-action-menu" id="server_7"> 
     <div> 
      Server 7 
     </div> 
    </div> 
</div> 

Ve CSS gibi bakıyor onlar leav yok ki bu

.info-panel > div { 
    margin: 4px;  
} 

nasıl DIV öğeleri bir marj ekleyebilir Sağ tarafta çok yer var mı?

Answer 1

İç kapta, kenar boşluğu yerine dolgu malzemesiyle çalışmalısınız. Bunu dene!

HTML

<div class="row info-panel"> 
    <div class="col-md-4" id="server_1"> 
     <div class="server-action-menu"> 
      Server 1 
     </div> 
    </div> 
</div> 

CSS

.server-action-menu { 
    background-color: transparent; 
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%); 
    background-repeat: repeat; 
    border-radius:10px; 
    padding: 5px; 
} 

Answer 2

Değişim @grid-columns sayısı. Sonra -offset kullanın. Sütunların sayısını değiştirmek, sütunlar arasındaki boşluk miktarını kontrol etmenizi sağlar. Örneğin.

variable.less (yaklaşık satır 294). Eğer sütunlarda bir kenarlık eklemek gerekmiyorsa

@grid-columns:    20; 

someName.html

<div class="row"> 
    <div class="col-md-4 col-md-offset-1">First column</div> 
    <div class="col-md-13 col-md-offset-1">Second column</div> 
</div> 

Answer 3

, ayrıca basit bir şekilde şeffaf bir sınır ekleyebilirsiniz:

[class*="col-"] { 
    background-clip: padding-box; 
    border: 10px solid transparent; 
} 

Answer 4

Aynı konuyla yüzleşiyordum; ve aşağıdaki benim için iyi çalıştı. Bu buradaki biri iniş yardımcı olur umarım:

<div class="row"> 
    <div class="col-md-6"> 
     <div class="col-md-12"> 
      Set room heater temperature 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="col-md-12"> 
      Set room heater temperature 
     </div> 
    </div> 
</div> 

Bu otomatik 2 div arasında biraz boşluk hale getirecek. div öğelerine border-box` stili:

Answer 5

Bunu yapmanın basit bir yolu

<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 1 
 
    </div> 
 
</div> 
 
<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 2 
 
    </div> 
 
</div> 
 
<div class="col-sm-4" style="padding: 5px;border:2px solid red;"> 
 
    <div class="server-action-menu" id="server_1">Server 3 
 
    </div> 
 
</div>

`kutu boyutlandırma ekleyerek