बूटस्ट्रैप का उपयोग करके बटन के बीच रिक्ति कैसे दें

82

मैं बटन के बीच रिक्ति देना चाहता हूं, बूटस्ट्रैप का उपयोग करके रिक्ति देने का एक तरीका है ताकि वे विभिन्न स्क्रीन प्रस्तावों के अनुरूप होंगे।

मैंने प्रयोग करने की कोशिश की margin-leftलेकिन क्या यह ऐसा करने का सही तरीका है। ??

यहाँ डेमो है

HTML:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

सीएसएस:

.margin-left{
    margin-left: 80px !important;
}
html  css  twitter-bootstrap 
— वैभव जैन
स्रोत
हाँ यह है, या आप col-
— sm-
बटन का आकार स्वतंत्र होना चाहिए। अगर मैं उनके संरेखण विकृत विकृत बटन की चौड़ाई को बदलने के लिए एक नज़र लोग (www.bootply.com/dDfIHeZizW) ले लो।
— वैभव जैन
विभिन्न समाधानों की कोशिश करने और अन्य लोगों से प्रतिक्रिया प्राप्त करने के बाद ##bootstrap IRCमैंने अभी के लिए जाने का फैसला किया है margin-left। धन्यवाद दोस्तों ...
— वैभव जैन
2
यह सही उत्तर है: stackoverflow.com/a/11216667/670229
— brauliobo
— मारियो ट्रूको

जवाबों:

108

आप बूटस्ट्रैप रिक्ति का उपयोग करके प्राप्त कर सकते हैं । बूटस्ट्रैप रिक्ति में आशुलिपि उत्तरदायी मार्जिन और पैडिंग की एक विस्तृत श्रृंखला शामिल है। उदाहरण नीचे में mr-1सेट marginया paddingकरने के लिए $spacer* .25।

उदाहरण:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

आप बूटस्ट्रैप रिक्ति पर अधिक पढ़ सकते हैं ।

— आसिफ रजा
स्रोत
10
बस जोड़ा गया mr-1 और बूम। धन्यवाद @ ए। रज़ा
— ImFarhad
7
यह बूटस्ट्रैप 4 के लिए है
— हस्सान
हां, यह "ट्वब्स 4.x" के लिए है।
— आसिफ रजा
3
धन्यवाद, यह वही था जिसकी मुझे तलाश थी!
— नाहुले गोंजालेज
क्या spacerबूटस्ट्रैप के भीतर परिभाषित किया गया है?
— ब्रैकेट्स
66

HTML:

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

सीएसएस:

.btn-space {
    margin-right: 5px;
}
— सर्गेई चेपर्नोव
स्रोत
1
हालांकि यह स्पष्ट रूप से उल्लेख नहीं किया गया था, ओपी का मतलब था कि वे एक पंक्ति में बटन पर गटर चाहते हैं। यह समाधान बूटस्ट्रैप के ग्रिड को तोड़ देगा, जिसके कारण बटन को लपेटने के लिए 100% चौड़ाई लगती है।
— पैपीरो
13
  1. class='col-xs-3'(उदाहरण के लिए) के साथ एक div में अपने बटन लपेटें ।
  2. class="btn-block"अपने बटनों में जोड़ें ।

यह स्थायी रिक्ति प्रदान करेगा।

— एलेक्स खलेबाव
स्रोत
लेकिन अगर मैं class='col-xs-3'अभिविन्यास विकृतियों के बजाय वर्ग = 'col-xs-2' का उपयोग करता हूं ..
— वैभव जैन
यह तब भी मदद करता है जब आप चाहते हैं कि बटन छोटे-छोटे प्रस्तावों पर एक दूसरे के नीचे लपेटें। "डिफ़ॉल्ट ग्रिड के साथ अपनी सामग्री को घोंसले में लाने के लिए, .col-sm- * कॉलम एक मौजूदा .col-sm- * कॉलम के साथ एक नया .row और सेट जोड़ें।" - स्रोत: getbootstrap.com/docs/3.4/css
— फंकी
10

यदि आप मार्जिन का उपयोग करना चाहते हैं, तो प्रत्येक बटन पर कक्षा को हटा दें और उपयोग करें : अंतिम-बच्चा सीएसएस चयनकर्ता।

Html:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

सीएसएस:

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}
— थिबुड ग्रेनियर
स्रोत
4

निर्भर करता है कि आपको कितनी जगह चाहिए। मुझे यकीन नहीं है कि मैं हर एक के बीच में "col-XX-1" जोड़ने के तर्क से सहमत हूं, क्योंकि आप तब हर एक के बीच में एक पूरे "कॉलम" को परिभाषित कर रहे हैं।

यदि आप प्रत्येक बटन के बीच में बस "थोड़ा रिक्ति" चाहते हैं, तो मुझे शामिल पंक्ति में पैडिंग जोड़ना पसंद है। इस तरह, मैं अभी भी सभी 12 कॉलमों का उपयोग कर सकता हूं, जबकि प्रत्येक बटन के बीच में "स्पेस" भी शामिल है।

बूटली: http://www.bootply.com/ugeXrxpPvD

— गांड मारने वाला
स्रोत
@brauliobo ने आपको एक उत्तर के रूप में जोड़ा क्योंकि मेरा मानना ​​है कि यह सही है।
— गैंडर्स
3

का प्रयोग करें btn-primary-spacingसभी बटन निकालने के लिए वर्ग margin-leftवर्ग

उदाहरण : 

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

सीएसएस की तरह होगा:

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}
— शशिकला
स्रोत
2
कक्षा कहाँ btn-primary-spacingसे आती है?
— टोनीटॉर्नडो
1
एक कस्टम कार्यान्वयन की तरह दिखता है। यहाँ कुछ कोड अच्छा होगा
— मार्कस ग्राफ
2

बटन में मार्जिन जोड़ने से यह व्यापक हो जाता है ताकि लेस बटन ग्रिड सिस्टम में फिट हो जाएं। यदि केवल एक दृश्य प्रभाव महत्वपूर्ण है, तो बटन को [स्टाइल = "मार्जिन: 0px; बॉर्डर: सॉलिड व्हाइट" के साथ एक सफेद बॉर्डर दें। यह बटन की चौड़ाई को अप्रभावित छोड़ देता है।

— थियो नूप्स
स्रोत
2

मूल कोड ज्यादातर वहीं होता है, लेकिन आपको btn-groupप्रत्येक बटन के चारों ओर की जरूरत होती है । बूटस्ट्रैप 3 में आप काम पाने के लिए btn-toolbar और btn-group का उपयोग कर सकते हैं; मैंने BS4 नहीं किया है, लेकिन इसके समान निर्माण हैं।

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>
— माइक के
स्रोत
मैंने इसे लागू किया, लेकिन यह बटन के लिए ऊर्ध्वाधर रिक्ति प्रदान नहीं करता है, जो मेरे लिए ध्यान देने योग्य था जब वे दो पंक्तियों / पंक्तियों पर लिपटे थे। "
— लीसी
1

मैं html में बहुत बुरा हूं लेकिन मैंने &nbsp;बटनों के बीच उपयोग किया है और यह अच्छी तरह से काम करता है।

— फिलिप रेमी
स्रोत
विचित्र रूप से, यह ऊपर के अधिक परिष्कृत समाधानों की तुलना में मेरे लिए बहुत बेहतर काम करता है।
— मैक्स वॉन हिप्पल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.