बूटस्ट्रैप लटकती: कैसे अच्छी तरह से

Question

मैं बूटस्ट्रैप सीख रहा हूँ पाठ रैप बनाने के लिए। मैं जैसे कि निम्न लटकती वाला कोई बटन चाहते हैं:

<div class="btn-group"> 
    <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#"> 
    Action 
    <span class="caret"></span> 
    </a> 
    <div class="dropdown-menu" style="width: 300px;"> 
    <div > 

    Long text goes here. 

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

लटकती मेनू के बजाय

, मैं लंबे समय से पाठ और अन्य एचटीएमएल टैग के साथ <div> है। समस्या यह है कि मैं अलग सीएसएस नियमों और लंबा पाठ करने की कोशिश की या तो फैली परे <div> या कारणों सलाखों स्क्रॉल दिखाने के लिए है। मैं सिर्फ लंबा पाठ <div> भीतर अच्छी तरह से लपेट चाहते हैं और पाठ की मात्रा पर निर्भर करता है नीचे चला जाता है।

मैं यह कैसे कर सकता हूं?

मैं का उपयोग कर रहा हूँ "ड्रॉप-डाउन-मेनू" घटक गलत तरीके से?

Answer 1

बस सफेद-अंतरिक्ष लंगर टैग के भीतर .dropdown-मेनू मेरे लिए काम किया करने के लिए सामान्य जोड़ने से आपके .dropdown-menu

Example fiddle

Answer 2

आप के बाद क्या कर रहे हैं करने के लिए इस पास है?
http://www.bootply.com/69776

आप मैं HTML थोड़ा बदल गया है और लटकती की चौड़ाई सीमित करने के लिए एक CSS वर्ग जोड़ दिया है देखेंगे। एचटीएमएल बटन के लिए अतिरिक्त कक्षाओं के एक जोड़े के साथ the bootstrap site से सीधे लिया जाता है।

एचटीएमएल

<div class="dropdown"> 
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action 
<span class="caret"></span></a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 

Lorem Ipsum मातम AMET बैठते हैं, consectetur adipiscing elit। वेल लिगुला में vestibulum non nulla eu dui imperdiet eleifend। यूट टेम्पोर ग्रेविडा लियो। बताओ बस में। नाम वेल निस्ल नुल्ला। Proin sagittis semper nunc et vehicula। Proin quam lacus, feugiat quis diam में, malesuada posuere odio। इंटीजर फायरटा sed ante eget posuere। नूलम एक डिपिबस लियो, वीटा ग्रेविडा लिगुला। प्रेजेंटेंट लॉरम और पेंटेस्केक imperdiet। सस्पेंडिस वीटा फ्रीो ऑक्टर, फायरेट ननक यू, लाओरेट्स अपडेट। Fusce posuere risus risus, id ultricies lectus aliquet et। Nullam eget orci et mauris lacinia sollicitudin non vel felis। प्रशंसनीय गलियारे और उदार अल्ट्राइस सुविधा।

सीएसएस

.dropdown-menu{ 
max-width:300px; 
} 

आशा इस मदद करता है!

Answer 3

को white-space: normal; जोड़ने के लिए, यह सिर्फ ऐसा नहीं किया-मेनू .dropdown को जोड़ने काम।

.navbar .nav li .dropdown-menu li a {white-space: normal;}