बूटस्ट्रैप ड्रॉपडाउन बुलबुला संरेखित करें (पुश-राइट नहीं)


89

मेरे पास मेरे शीर्ष मेनू में गाड़ी है, push-rightऔर मेरी समस्या यह है कि ड्रॉपडाउन बुलबुला पृष्ठ से बाहर हो जाता है। मैं बुलबुला सही संरेखित करने का प्रयास कर रहा हूं, ताकि यह 'क्लिक' के साथ सही संरेखित हो

इस तरह

यहाँ छवि विवरण दर्ज करें

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

2
दूसरों को दिखाने के लिए jsfiddle.net में डालना बेहतर है कि आपके पास क्या है।
जोफ्रीएचएस

क्या आपने right:0;ड्रॉपडाउन पर कोशिश की है?
राहुल

जवाबों:


190

बूटस्ट्रैप 3.1+

वर्ग ड्रॉपडाउन मेनू वाले एक ही div में वर्ग .dropdown-menu-right जोड़ना:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

बूटस्ट्रैप 2.3 और 3.0

वर्ग ड्रॉपडाउन मेनू वाले एक ही div में वर्ग .pull-right जोड़ें

<div class="dropdown-menu pull-right">
    STUFF
</div>

यह बूटस्ट्रैप 3.0 का उपयोग करके मेरे लिए काम करता है


20
V3.1.0 के बाद से आप ड्रॉपडाउन-मेनू-राइट का उपयोग कर सकते हैं । देखें github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
लौरेंत Dezitter

19

इसे बूटस्ट्रैप क्लास के dropdown-menu-right साथ हल किया जा सकता है dropdown-menu, विशेष रूप से इस समस्या के लिए जो सीएसएस गुणों का उपयोग करता है right: 0;औरleft: auto; इसे सही संरेखित करता है।

यह समाधान मेरे लिए काम कर रहा है।

स्रोत - http://getbootstrap.com/compenders/#btn-dropdowns-dropup (इसके लिए डेवलपर टूल पर जाएं)


1
हां, यह सही समाधान है (बूटस्ट्रैप 3.3.7)। बस सुनिश्चित करें कि आप उस वर्ग dropdown-menu-rightको जोड़ते हैं ulजिसमें मेनू विकल्प हैं (बटन नहीं)
मिगुएल



2

ठीक मिल गया!

position:relative;left:0 पर <ul class="dropdown-menu">

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.