बूटस्ट्रैप केंद्र ड्रॉपडाउन मेनू

Question

संरेखित करें मेरे पास मेरे पृष्ठ के केंद्र में एक ड्रॉपडाउन बटन है, लेकिन जब मैं ड्रॉपडाउन पर क्लिक करता हूं, तो वास्तविक ड्रॉपडाउन भाग पृष्ठ के बाईं ओर अभी भी है। मुद्दा क्या है?

एचटीएमएल

<div class="row"> 
    <div class="col-md-12 school-options-dropdown"> 
      <div class="dropdown"> 
       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School 
       <span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Add your school</a></li> 
        <li><a href="#">Hello</a></li> 
       </ul> 
      </div> 
    </div> 
</div> 

सीएसएस

div.school-options-dropdown { 
    text-align: center; 
} 

.dropdown { 
    text-align:center; 
} 

.dropdown-menu { 
    text-align: center; 
} 

Answer 1

आप लटकती मेनू और एक .btn-group अंदर टॉगल बटन डाल करने के लिए की जरूरत है।

इसके अलावा, बूटस्ट्रैप सामग्री को संरेखित करने के लिए .text-center property प्रदान करता है। इसका उपयोग सीएसएस को मैन्युअल रूप से जोड़ने के बजाय .school-options-dropdown पर किया जा सकता है।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="row"> 
 
    <div class="col-md-12 school-options-dropdown text-center"> 
 
    <div class="dropdown btn-group"> 
 

 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School 
 
     <span class="caret"></span> 
 
     </button> 
 

 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Add your school</a></li> 
 
     <li><a href="#">Hello</a></li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

आप अपने एचटीएमएल कोड में परिवर्तन नहीं करना चाहते हैं, इस सीएसएस आपकी समस्या का समाधान होगा:

.dropdown {text-align:center;} 
.button, .dropdown-menu {margin:10px auto} 
.dropdown-menu {width:200px; left:50%; margin-left:-100px;} 

Example on jsfiddle.net।

Answer 3

आप चाल कर सकते हैं, मेनू की सामग्री संरेखित केंद्र के लिए देख रहे हैं तो

ul.dropdown-menu>li { 
    text-align: center; 
} 

हैं।

Answer 4

सुनिश्चित करें कि आप इसे परिभाषित करते हुए पूरे div वर्ग में संरेखण जोड़ते हैं