मैं एक ही div में दो बटन के बीच में जगह कैसे बना सकता हूँ?

Question

बूटस्ट्रैप बटन को क्षैतिज रूप से स्पेस करने का सबसे अच्छा तरीका क्या है?

फिलहाल बटन स्पर्श कर रहे हैं:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

समस्या को दर्शाने वाला jsfield: http://jsfiddle.net/hhimanshu/sYLRq/4/

Comments

मेरे पास एक ही मुद्दा था और बटनों में से एक मार्जिन को जोड़ना समाप्त हो गया- mr-1।

— अनंत

Answer 1

उन्हें अंदर btn-toolbarया किसी और कंटेनर में डालें , नहीं btn-group। btn-groupउनका साथ देता है। बूटस्ट्रैप प्रलेखन के बारे में अधिक जानकारी ।

संपादित करें: मूल प्रश्न बूटस्ट्रैप 2.x के लिए था, लेकिन वही अभी भी बूटस्ट्रैप 3 और बूटस्ट्रैप 4 के लिए मान्य है ।

में बूटस्ट्रैप 4 आप इस तरह के mx-2 के रूप उपयोगिता कक्षाएं, का उपयोग कर अपने समूहों के लिए उचित मार्जिन जोड़ने की आवश्यकता होगी।

Comments

मैं वर्षों पहले इस समस्या के समाधान की तलाश में था, मैं आपको पहले क्यों नहीं मिला, आप मेरे हीरो हैं

— हक़न फ़िस्तिक

क्या सीधा जवाब है! दिन के मेरे नायक :)

— नागा

btn-toolbarकुछ बटन को एक नई पंक्ति में लपेट सकते हैं। इससे कैसे बचा जाए?

— लुकासॉ l

इसे जवाबदेही के लिए तोड़ने की योजना है। आप वास्तव में इसे तोड़ने से रोकने के लिए चाहते हैं, तो सेट flex-wrap: nowrapके लिए btn-toolbarबूटस्ट्रैप 4 में या के संयोजन के साथ कोशिश overflowऔर white-spaceबड़े बूटस्ट्रैप संस्करणों के लिए।

— मिरोस्लाव पोपोविक

@ देखें, "बटन समूह" अनुभाग में थोड़ा नीचे देखें - getbootstrap.com/docs/4.1/compenders/button-group/…

— Miroslav Popovic

Answer 2

ब्रो मिरोस्लाव पोपोविक द्वारा बताए गए बटन को बस एक वर्ग (वर्ग = "बीटीएन-टूलबार") में रखें। यह कमाल का काम करता है।

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

Answer 3

आप बूटस्ट्रैप के लिए रिक्ति का उपयोग कर सकते हैं और किसी भी अतिरिक्त सीएसएस की आवश्यकता नहीं है। बस अपने बटनों में कक्षाएं जोड़ें। यह संस्करण 4 के लिए है।

Comments

मैं चाहता था कि बटन एक पंक्ति में दिखाई दें और छोटे पर्दे पर उन्हें (लपेटने के कारण) स्टैक करने की अनुमति दें। स्पेसिंग को प्राप्त करने के लिए जो क्षैतिज और लंबवत दोनों तरह से काम करता है, बूटस्ट्रैप क्या प्रदान करता है, मैंने किया: className='mb-2 mr-2'@ ड्रैगन-बी के सुझाव का पालन करते हुए

— ABCD.ca

Answer 4

आपको बूटस्ट्रैप v.4 का उपयोग करना चाहिए

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Comments

यह बूटस्ट्रैप 4 आईएमओ के लिए सबसे अच्छा समाधान है। छोटे स्क्रीन पर आप "px-0 px-sm-2" का उपयोग कर सकते हैं ताकि तदनुसार पेडिंग से छुटकारा पा सकें। बहुत बढ़िया जवाब।

— आरएम-कोड

Answer 5

ड्रेगन बी ने जो सुझाव दिया वह बूटस्ट्रैप 4 के लिए जाने का सही तरीका है। मैंने नीचे एक उदाहरण दिया है। उदाहरण के लिए mr-3 मार्जिन-राइट: 1rem है!

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps: मेरे मामले में मैं चाहता था कि मेरे बटन स्क्रीन के दाईं ओर प्रदर्शित हों और इसलिए पुल-राइट।

Comments

बस btn-toolbarअंतरिक्ष मुद्दे को ठीक करने में बटन लपेटने !

— अरसलान अमीर

Answer 6

अधिकांश स्थितियों में सबसे आसान तरीका मार्जिन है।

तुम कहाँ कर सकते हो:

button{
  margin: 13px 12px 12px 10px;
}

या

button{
  margin: 13px;
}

Comments

कस्टम मार्जिन का उपयोग नहीं किया जाना चाहिए जब आप बूटस्ट्रैप बटन को बीटीएन-टूलबार वर्ग के अंदर रख सकते हैं।

— मिल्सियोनियर

Answer 7

मैं बूटस्ट्रैप 4 प्लगइन बटन (इस्तेमाल किया https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) और वर्ग जोड़ा गोल लेबल और वर्ग के लिए mx -1 मध्य बटन को प्राप्त करने के लिए वांछित देखो और अलग रेडियो बटन का लग रहा है। वर्ग बीटीएन-टूलबार का उपयोग करके रेडियो बटन मंडलियां मेरे लिए दिखाई देती हैं जो कि मैं नहीं चाहता था। आशा है कि यह किसी की मदद करता है।

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Answer 8

इसे प्राप्त करने का एक और तरीका है अपने बटनों में एक वर्ग .btn-space जोड़ना

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

और इस वर्ग को इस प्रकार परिभाषित करें

.btn-space {
    margin-right: 15px;
}

Answer 9

मैं वास्तव में उसी आवश्यकता में भाग गया। मैं बस इस तरह सीएसएस ओवरराइड का इस्तेमाल किया

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

Answer 10

यदि बूटस्ट्रैप का उपयोग करें, तो आप शैली के साथ बदल सकते हैं: यदि आप केवल एक पृष्ठ में चाहते हैं, तो betwen head टैग जोड़ें .btn-group btn {मार्जिन-राइट: 1rem;}

यदि सभी वेब साइट के लिए सीएसएस फ़ाइल में जोड़ें

Answer 11

ड्रैगन बी समाधान सही है। मेरे मामले में मुझे बटन की आवश्यकता खड़ी थी जब स्टैकिंग किया गया था, इसलिए मैंने एमबी -2 संपत्ति को उनके साथ जोड़ा।

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

Answer 12

मैंने कुछ वैसा ही किया जैसा कि डिब ने किया था, लेकिन मुझे थोड़ा अलग तरीके से रिक्ति का पता लगाने की जरूरत थी।

col-xबूटस्ट्रैप में कक्षाएं एक निरपेक्ष lifesaver हो सकता है। मैंने ऐसा ही कुछ करने की कोशिश की:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

इसने मुझे शीर्षक और इनपुट स्विचेस को अच्छी तरह से जगह में संरेखित करने की अनुमति दी। एक ही विचार बटन पर लागू किया जा सकता है और आपको बटन को छूने से रोकने की अनुमति देता है।

(साइड नोट: मैं चाहता था कि यह उपरोक्त लिंक पर एक टिप्पणी हो, लेकिन मेरी प्रतिष्ठा बहुत अधिक नहीं है)