बूटस्ट्रैप

Question

का उपयोग कर केंद्र में बटन को संरेखित कैसे करें मैंने बूटस्ट्रैप का उपयोग करके एक टाइल बनाई है। टाइल के अंदर, नीचे के करीब मैं टाइल के तीन बटन (प्रारंभ, मध्य और अंत) चाहता हूं।

मैंने प्रारंभ और अंत बटन बनाए लेकिन pull-left और pull-right कक्षाओं के साथ दो div टैग का उपयोग किया। अब मैं चाहता हूं कि मध्य बटन डालना है।

<div class="col-lg-12"> 
    <div class="pull-left"> 
     <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
    </div> 

    <!-- I want another button here, center to the tile--> 

    <div class="pull-right"> 
     <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button> 
    </div> 
</div> 

Answer 1

एक बूटस्ट्रैप के सबसे शक्तिशाली सुविधाओं row तत्वों घोंसला बनाने से है:

यहाँ मेरी कोड का एक हिस्सा और एक स्क्रीनशॉट है। हर col-* कंटेनर इसके अंदर एक और row है, जो तब 12 col रिक्त स्थान की एक और पूरा सेट प्रदान करता है हो सकता है:

<div class="col-lg-12"> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Middle Button</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Decline</button> 
     </div> 
    </div> 
</div> 

मुझे यकीन है कि कैसे अपने pull-* कक्षाएं बिल्कुल उसी तरह काम नहीं कर रहा हूँ, लेकिन का उपयोग कर बूटस्ट्रैप के अंतर्निहित ग्रिड प्रणाली आपको चाहिए उनसे छुटकारा पाने में सक्षम हो।

Bootstrap guide on nesting columns याद न करें, क्योंकि यह इस उत्तर से अधिक जानकारी प्रदान करता है।

Answer 2

आप बूटस्ट्रैप I का उपयोग कर रहे हैं, इसलिए आपकी सबसे अच्छी शर्त और अभ्यास इसकी 'ग्रिड सिस्टम का लाभ उठाना होगा।

पंक्ति नामक कक्षा के साथ एक div बनाओ और उस मूल div के अंदर बच्चों को अपनी इच्छित सामग्री में विभाजित करें।

इस विभाजन का तरीका यह है कि कॉल- [आकार] के पीछे की संख्या - यह तय करती है कि क्षैतिज स्थान कितना होगा। अंत में इसे 12 तक जोड़ना होगा, इसलिए आपके मामले में, हम तीन भागों चाहते हैं जो आकार 4 प्रत्येक हैं।

उदाहरण के लिए:

<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 

तब बस अपने कॉल-XS-4 div के के अंदर बटन रखा है और आप जाने के लिए तैयार कर रहे हैं।

Answer 3

इस विकल्प का उपयोग करें:

<div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>