मैं कैसे

Question

मेरे लेआउट लपेटकर बिना बूटस्ट्रैप स्तंभों के बीच एक मार्जिन जोड़ सकता हूँ वर्तमान में लग रहा है इस

केंद्र स्तंभ में, मैं प्रत्येक Server डिव के बीच एक छोटे से मार्जिन जोड़ना चाहते हैं की तरह। लेकिन, अगर मैं सीएसएस के लिए एक मार्जिन जोड़ने के लिए, यह पंक्ति लपेटना समाप्त हो जाती है और इस

<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> 

और सीएसएस

.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; 
} 

मैं ऐसा करके मार्जिन जोड़ने का प्रयास किया की तरह लग रही यह

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

मैं डीआईवी में मार्जिन कैसे जोड़ सकता हूं ताकि वे लीव न करें ई दायीं तरफ इतनी जगह है?

Answer 1

आपको मार्जिन के बजाय आंतरिक कंटेनर पर पैडिंग के साथ काम करना चाहिए। इसे इस्तेमाल करे!

एचटीएमएल

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

सीएसएस

.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

बदलें @grid-columns की संख्या। फिर -offset का उपयोग करें। कॉलम की संख्या बदलने से आप कॉलम के बीच की जगह को नियंत्रित कर सकते हैं। जैसे

variables.less (लगभग लाइन 2 9 4)।

@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

आप स्तंभों पर एक सीमा जोड़ने की जरूरत नहीं है, तो आप भी बस एक पारदर्शी सीमा उन पर जोड़ सकते हैं:

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

Answer 4

मैं एक ही मुद्दे का सामना कर रहा था; और निम्नलिखित मेरे लिए अच्छा काम किया। उम्मीद है कि यह यहां लैंडिंग में मदद करता है:

<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> 

यह स्वचालित रूप से 2 divs के बीच कुछ जगह प्रदान करेगा।

Answer 5

यह करने के लिए आसान तरीका एक div के भीतर एक div कर रही है

<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>