ट्विटर बूटस्ट्रैप ड्रॉपडाउन स्क्रीन के बाहर चला जाता है

Question

मैं ट्विटर बूटस्ट्रैप ड्रॉपडाउन मेनू लागू करना चाहता हूं, यहां मेरा कोड है:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

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

मेरे द्वारा यह कैसे किया जा सकता है?

Comments

इस प्रश्न का सही उत्तर (बूटस्ट्रैप> = v 3.2.0 के लिए) यहाँ हल किया गया है: stackoverflow.com/questions/23654962/… @cvrebert द्वारा।

— माइकल ट्रू ने

मेरा मानना ​​है कि आपका कोड एंड स्पैन टैग गायब है: </ span>

— स्टील्थनीक्स

Answer 1

जोड़ने के .pull-rightलिए ul.dropdown-menuयह करना चाहिए

पदावनति सूचना: बूटस्ट्रैप v3.1.0 के रूप में, .pull-rightड्रॉपडाउन मेनू पर पदावनत किया जाता है । मेनू को दाएं-संरेखित करने के लिए, उपयोग करें .dropdown-menu-right।

Comments

यह एक पूरी तरह से अलग सवाल है

— ड्वेन

यह जवाब वास्तव में समस्या को ठीक नहीं करता है यदि उपयोगकर्ता कुछ छोटे स्क्रीन डिवाइस का उपयोग कर रहा है - यह दाईं ओर के बायीं ओर से बाहर जा रहा है (वास्तव में आप केवल पुल-बाएं को पुल-दाएं में बदलते हैं)।

— अनाम

Krzychu जवाब के रूप में Bootstrap.pull-सही बहिष्कृत है देखें

— जेरोन

@HristoEnev मुझे भी। क्या आपके ड्रॉपडाउन बटन बंद हो गए थे?

— चॉयलटन बी। हिगिनबॉटम

Answer 2

चूंकि बूटस्ट्रैप v3.1.0 जोड़ना .pull-rightड्रॉपडाउन मेनू पर हटा दिया गया है। इसके बजाय ए .dropdown-menu-rightजोड़ा जाना चाहिए ul.dropdown-menu। डॉक्स

Comments

यहां तक ​​कि नवीनतम बूटस्ट्रैप के साथ .pull-right मेरे लिए काम करता है, और .dropdown-menu-right कुछ नहीं करता है।

— शेन ग्रांट

यह वास्तव में छोड़कर आप (नहीं उल) .dropdown-मेनू-सही div.dropdown-मेनू में वर्ग को जोड़ने बूटस्ट्रैप 4 में काम करता है,

— टिमोथी Kanski

<ul class="dropdown-menu dropdown-menu-right">मेरे लिए 4.1.1 पर काम किया

— dw1

Answer 3

बूटस्ट्रैप 4 के लिए, dropdown-menu-rightकार्यों को जोड़ना । यहाँ एक काम कर उदाहरण है ..

http://codeply.com/go/w2MJngNkDQ

Comments

मैंने अन्य सभी उत्तरों की कोशिश की, - और यह एक ही एकमात्र ऐसा था जिसने मेरे लिए भी काम किया। मैं बूटस्ट्रैप v। 4.1.0 का उपयोग कर रहा हूं।

— जेथ

Answer 4

एक समाधान जिसमें HTML को संशोधित करने की आवश्यकता नहीं है केवल CSS है

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

गतिशील रूप से उत्पन्न मेनू के लिए इसका विशेष रूप से उपयोगी है, जहां अनुशंसित वर्ग dropdown-menu-rightको अंतिम तत्व में जोड़ना हमेशा संभव नहीं होता है

Comments

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

— charsi

Answer 5

आप .dropdown-pull-rightनिम्नलिखित सीएसएस के साथ वर्ग का उपयोग कर सकते हैं :

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Answer 6

बूटस्ट्रैप 4 में आप .dropleft का उपयोग कर सकते हैं

बस इसमें बदलाव करें:

<span class="dropleft">

या

add .dropdown-menu- {lg, med, sm, xs}-right to your dropdown-menu

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

Answer 7

float-*-right बूटस्ट्रैप 4 के लिए

* = एक्सएस, एससी, एमडी, एलजी

Answer 8

मैं एक टिप्पणी नहीं छोड़ सकता क्योंकि मेरा एसओ स्तर बहुत कम है, लेकिन मैंने अभी यह सुनिश्चित किया है कि माता-पिता कंटेनर को "अतिप्रवाह: छिपाया" जैसे सेट किया गया है (यह भी सुनिश्चित करें कि स्थिति निर्धारित है)।

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>