ट्विटर बूटस्ट्रैप नेविगेशन बार - दाएं संरेखित ड्रॉपडाउन मेनू

Question

मैं एक PHP साइट के साथ ट्विटर बूटस्ट्रैप (v2.1.1) का उपयोग कर रहा हूं। मैं एक PHP स्क्रिप्ट में गतिशील रूप से नेविगेशन बार उत्पन्न कर रहा हूं क्योंकि उपयोगकर्ता लॉग इन या साइट से बाहर होने पर नेविगेशन बार में अलग-अलग सामग्री होगी।

मैं स्क्रीन के दाईं ओर अंतिम ड्रॉपडाउन मेनू को संरेखित करना चाहता हूं लेकिन अब तक सक्षम नहीं हूं। यहाँ एक jsFiddle एक सरलीकृत संस्करण दिखा रहा है:

http://jsfiddle.net/fmdataweb/AUgEA/

मैं नीचे मेनू 2 बूंद चाहते हैं सही गठबंधन किया जाना। पिछले लटकती के लिए कोड अन्य ड्रॉपडाउन के लिए के रूप में ही है:

<li class="dropdown pull-right"> 
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
<ul class="dropdown-menu"> 
<li><a href="propertiesSearch.php">Logout</a></li> 
</ul> 
</li>   

मैं कोशिश करने के लिए यह chaging है:

<li class="dropdown pull-right"> 

लेकिन यह है कि कोई फर्क नहीं पड़ता। किसी को पता है कि ड्रॉपडाउन मेनू को दाईं ओर कैसे खींचें जैसे आप फॉर्म और <p> टेक्स्ट के साथ कर सकते हैं? बाईं ओर li तत्व खींच की

Answer 1

आपको .pull-right कक्षा ul तत्व इंस्टेंट को बदलने की आवश्यकता है li का ईद।

एचटीएमएल

<ul class="nav pull-right"> 
    <li class="dropdown"> 
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown"> 
     Menu 2 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="propertiesSearch.php">Logout</a></li> 
    </ul> 
    </li> 
</ul> 

---

संस्करण 2.1.1

मैं केवल आवश्यक जावास्क्रिप्ट प्लगइन्स (बूटस्ट्रैप-dropdown.js) सहित अपने कोड, ट्विटर बूटस्ट्रैप के नवीनतम संस्करण को दुबारा लिखा (2.1.1) और उत्तरदायी डिजाइन के लिए समर्थन।

http://jsfiddle.net/caio/gvw7j/

उपरोक्त लिंक पर उत्तरदायी मेनू देखते हैं तो आप इस लिंक में "विस्तृत परिणाम" देख सकते हैं:

.pull-right { 
    float: right !important; 
} 

:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right द्वारा परिभाषित किया गया है

---

संस्करण 3.1.1

इस कक्षा में कोई बदलाव नहीं थे। आप helpers classes अनुभाग देख सकते हैं।

हालांकि, प्रलेखन .navbar-right वर्ग का उपयोग करने की सिफारिश करता है क्योंकि इसमें pull-right कक्षा के विपरीत कुछ विशिष्ट अनुकूलन हैं।

Answer 2

इसके बजाय, बस उस तत्व है जो आप सही अपने स्वयं के ul सूची के भीतर गठबंधन हो सकता है और खींचने के लिए इच्छा शामिल है कि बजाय इतना की तरह:

एचटीएमएल

<ul class="nav pull-right"> 
    <li class="dropdown"> 
     <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="propertiesSearch.php">Logout</a></li> 
     </ul> 
    </li>  
</ul> 

डेमो: http://jsfiddle.net/AUgEA/1/

Answer 3

बूटस्ट्रैप 3, .navbar-right का उपयोग करने वालों के लिए यह चाल चलती है।

के लिए उदाहरण के लिए।,

<ul class="nav navbar-nav navbar-right"> 
. 
. 
</ul> 

Answer 4

तो आप यहां आया था की कोशिश कर रहा एक नियमित रूप से बूटस्ट्रैप .dropdown-menu और नहीं एक .nav, राइट-संरेखित और बूटस्ट्रैप 3 उपयोग कर रहे हैं, को जोड़ने के लिए सही वर्ग .dropdown-menu-right है

यहाँ bootstrap documentation है:

<ul class="dropdown-menu dropdown-menu-right"> 
    ... 
</ul>