बूटस्ट्रैप

Question

काटने से नीचे ड्रॉप डाउन मैं एक परियोजना में अपने टिप्पणी अनुभाग में एक ड्रॉपडाउन सेटिंग मेनू जोड़ने की कोशिश कर रहा हूं जिस पर मैं काम कर रहा हूं।

ड्रॉपडाउन मेनू खुद को काट रहा है और मुझे यकीन नहीं है कि यह मामला क्यों है।

मैंने overflow:visible and z-index:999 की कोशिश की। लेकिन उनमें से कोई भी काम नहीं कर रहा है।

यह इस बुनियादी कोड है कि मैं कोशिश कर रहा हूँ

<div class="media"> 
    <a class="pull-left" href="/user/{{shared_scribble.scribble.user.username}}/"><img class="media-object" src="/img.png/"></a> 
    <div class="dropdown pull-right"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:10px;padding: 4px 8px;"> 
      <b data-icon="&#xe001;"></b> <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> 
      <li><a href="#"><i class="icon-trash"></i> Delete</a></li> 
      <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> 
      <li class="divider"></li> 
      <li><a href="#"><i class="i"></i> Make admin</a></li> 
     </ul> 
    </div> 
    <div class="media-body"> 
     <h4 class="media-heading"><a class="username" href="/user/hi/">Test User</h4> 
     <p> 
      Main body of the comment 
     </p> 
    </div> 
</div> 

को लागू करना है एक बुनियादी टिप्पणी ब्लॉक कि मैं

में एक लटकती शामिल करने के लिए कोशिश कर रहा हूँ है और यह है कि मेरे लटकती मेनू घूम रहा है बाहर

मीडिया सीएसएस होने की

.media, 
.media-body { 
    overflow: hidden; 
    *overflow: visible; 
    zoom: 1; 
} 
.media, 
.media .media { 
    margin-top: 15px; 
} 
.media:first-child { 
    margin-top: 0; 
} 
.media-object { 
    display: block; 
} 
.media-heading { 
    margin: 0 0 5px; 
} 
.media .pull-left { 
    margin-right: 10px; 
} 
.media .pull-right { 
    margin-left: 10px; 
} 
.media-list { 
    margin-left: 0; 
    list-style: none; 
} 

Answer 1

जांचें कि मीडिया क्लास में overflow:hidden है या नहीं। यदि ऐसा है, तो इसे overflow: auto या overflow: visible से बदलें।

Answer 2

लिखें इस तरह:

.media, 
.media-body { 
    overflow: visible; 
} 

.media:after, 
.media-body:after{ 
content:''; 
clear:both; 
display:block; 
} 

हो सकता है कि आप मदद है।

Answer 3

नई विधि:

बस मीडिया कक्षा से बाहर ड्रॉप डाउन मेनू लाने के लिए और एक नकारात्मक मार्जिन का उपयोग करें:

<div class="dropdown pull-right" style="margin-left:-30px"> 
    ... 
</div> 

<div class="media"> 
    ... 
</div> 

Answer 4

यह मेनू के रूप में एक आदर्श समाधान लक्ष्य तत्व के साथ स्क्रॉल नहीं होंगे नहीं है, लेकिन मैं एक अंतिम उपाय के रूप में एक स्क्रॉल डेटा तालिका के लिए यह कर रहा हूँ जब तक मैं एक विकल्प मिल सकते हैं:

(function() {            
    var dropdownMenu;          
    $(window).on('show.bs.dropdown', function(e) {   
    dropdownMenu = $(e.target).find('.dropdown-menu'); 
    $('body').append(dropdownMenu.detach());   
    dropdownMenu.css('display', 'block');    
    dropdownMenu.position({       
     'my': 'right top',        
     'at': 'right bottom',       
     'of': $(e.relatedTarget)      
    })             
    });             
    $(window).on('hide.bs.dropdown', function(e) {   
    $(e.target).append(dropdownMenu.detach());   
    dropdownMenu.hide();        
    });             
})();     

यह शरीर के लिए मेनू संलग्न करें और यह साफ छिपाने पर होगा। मैं स्थिति के लिए jquery UI का उपयोग कर रहा हूं लेकिन यदि आप भारी निर्भरता को जोड़ना नहीं चाहते हैं तो आप नियमित jquery स्थिति के साथ इसे प्रतिस्थापित कर सकते हैं। यदि आप केवल ड्रॉपडाउन के सीमित चयन में ऐसा करना चाहते हैं तो आप $(window).on को भी बदलना चाहेंगे।

Answer 5

इसे अक्सर प्राप्त परियोजनाओं पर प्राप्त करें; एक से एक माता-पिता होने

अतिप्रवाह तत्वों का मामला हो जाता है: छिपा

एक बार मैं इस यह उम्मीद के रूप में काम करने लगता है निकाल सकते हैं (जब तक आपके डिजाइन इस संपत्ति पर भरोसा नहीं है)।

Answer 6

मुझे एक ही समस्या थी। इस लाइनों को जोड़ने के बाद, मेरे लटकती काम बस के रूप में मैं उम्मीद:

@media (max-width: 767px) { 
    .table-responsive .dropdown-menu { 
     position: static !important; 
    } 
} 

@media (min-width: 768px) { 
    .table-responsive { 
     overflow: visible; 
    } 
} 

मैं समाधान here