बूटस्ट्रैप 4 केन्द्र-ब्लॉक

Question

केंद्र के लिए असमर्थ मैं निम्नलिखित बूटस्ट्रैप एचटीएमएल कोड है (इसके JSX इसलिए className लेकिन यह विचार एक ही है):

<div className="toggleView btn-group center-block" role="group" aria-label="Basic example"> 
     <button onClick={this.handleTimelineClick} type="button" className={this.state.toggleCalendar == false ? "btn btn-secondary active" : "btn btn-secondary"}>Timeline</button> 
     <button onClick={this.handleCalendarClick} type="button" className={this.state.toggleCalendar == true ? "btn btn-secondary active " :"btn btn-secondary"}>Calendar</button> 
</div> 

मैं या तो बूटस्ट्रैप केंद्र के साथ इस कोड केंद्रित करने के लिए कोशिश कर रहा हूँ -block या सीएसएस के साथ, लेकिन यह काम करने के लिए प्राप्त करने के लिए प्रतीत नहीं कर सकते हैं:

हरी पट्टी div toggleView पर प्रकाश डाला गया।

.toggleView { 
    padding: 20px; 
} 

मैं क्यों नहीं इस बटन समूह केंद्रित कर सकता है:

केवल सीएसएस मैं उपयोग कर रहा हूँ पीछा कर रहा है?

Answer 1

btn-group .. display:inline-block ताकि आप पैरेंट कंटेनर में text-center का प्रयोग करेंगे है

http://codeply.com/go/hyUYkUrtRN

नोट: बूटस्ट्रैप 4 में, center-block अब mx-auto है, display:block तत्वों केंद्रित के लिए margin: 0 auto; का प्रतिनिधित्व। 4 बूटस्ट्रैप अब एक d-block वर्ग भी तो एक इनलाइन तत्व प्रदर्शन किया जा सकता है है: इस तरह ब्लॉक ..

<img src=".." class="d-block mx-auto" >

यह भी देखें: Center the content inside a column in Bootstrap 4

Answer 2

बूटस्ट्रैप 4 center-block इसके बजाय नहीं है, मैं d-block m-x-auto का उपयोग जो ऑटो पर ब्लॉक, और बाएं और दाएं मार्जिन को प्रदर्शित करता है।

Answer 3

बूटस्ट्रैप 4 (2017-08-16 के रूप में) d-block का उपयोग करेगा और केंद्र में आप mx-auto का उपयोग करेंगे।