बूटस्ट्रैप 3.0

Question

में एक ड्रॉपडाउन सूची की चौड़ाई निर्धारित करना मैं बूटस्ट्रैप 3.0 में ड्रॉपडाउन ट्रिगरिंग बटन की चौड़ाई को ड्रॉपडाउन सूची की चौड़ाई के बराबर कैसे सेट कर सकता हूं? बूटस्ट्रैप-चयन (http://silviomoreto.github.io/bootstrap-select/) का उपयोग करते समय हासिल की जाने वाली चीज़ों के समान। मैं एक सहयोगी * वर्ग के साथ एक div में पूरी सूची रैप करने के लिए कोशिश की है, लेकिन यह काम करने के लिए प्रतीत नहीं होता:

<div class="row"> 
<div class="col-xs-4 col-md-4"> 
    <div class="dropdown"> 
     <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Action</a></li> 
      </ul> 
    </div> 
</div> 

इस प्रकार, मैं चाहूँगा: बटन चौड़ाई = लटकती मेनू सूची = col- * चौड़ाई।

Answer 1

मैंने पाया ड्रॉपडाउन-मेनू और बटन चौड़ाई = 100% सेट करके समाधान।

.dropdown-menu { 
    width: 100%; 
} 

.btn{ 
width: 100%; 
} 

अब बटन और ड्रॉपडाउन सूची दोनों की समान चौड़ाई है, जो कॉलम चौड़ाई द्वारा नियंत्रित होती है।

Answer 2

अगर मैं सही ढंग से समझ आप मेनू चौड़ाई शैली बड़ा विकल्प के अनुसार चाहते हैं आप .dropdown-menu सूची तरह की min-width संपत्ति को ओवरराइड करने के लिए है:

.dropdown-menu { 
    min-width: 0px !important; 
} 

डेमो: http://jsfiddle.net/faxyz/4/

Answer 3

आप .dropdown-toggle. की चौड़ाई निर्धारित कर सकते हैं, जब मैं ड्रॉपडाउन बहुत छोटा हो जाता हूं तो text-overflow इलिप्सिस का उपयोग करने की सलाह देता हूं। .dropdown-menu शैली बनाना आवश्यक नहीं है। यदि आप इसे .input-group में या ग्रिड में नहीं उपयोग करना चाहते हैं तो आप ड्रॉपडाउन की चौड़ाई किसी अन्य मान पर सेट कर सकते हैं।

.dropdown-toggle { 
    overflow: hidden; 
    padding-right: 24px /* Optional for caret */; 
    text-align: left; 
    text-overflow: ellipsis;  
    width: 100%; 
} 

/* Optional for caret */ 
.dropdown-toggle .caret { 
    position: absolute; 
    right: 12px; 
    top: calc(50% - 2px); 
} 

Answer 4

मैं यहां एक समान समस्या का समाधान ढूंढ रहा था, हालांकि मेरे मामले में ड्रॉपडाउन एक कोल div के भीतर नहीं था। मैं ड्रॉपडाउन बटन को ड्रॉपडाउन सूची की चौड़ाई से मेल खाना चाहता था, जो किसी भी ड्रॉपडाउन के समान, जो भी व्यापक था, की सामग्री चौड़ाई पर निर्भर करता था। किसी को भी एक ऐसी ही समाधान की तलाश में है, तब यह इस प्रकार है:

.dropdown-container { 
    float:right; 
    height:60px; 
} 
.position-dropdown-controller { 
    position: absolute; 
    right:0; 
} 

.dropdown-toggle, 
.dropdown-menu { 
    width: 100%; 
    min-width: 0; 
} 

.dropdown-toggle { 
    text-align: right; 
} 

.dropdown-menu { 
    height: 0; 
    text-align: center; 
    display: block !important; 
    visibility: hidden; 
    position: relative; 
    float: none; 
} 

.open .dropdown-menu { 
    display: block !important; 
    visibility: visible; 
    height: auto; 
} 

<div class="dropdown-container"> 
    <div class="position-dropdown-controller"> 
    <div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button> 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     ... 
     </ul> 
    </div> 
    </div> 
</div> 

इस उदाहरण मैं लटकती सही करने के लिए जारी करना चाहता था में, लेकिन यह बस के रूप में आसानी से जैसे आप चाहें काम करने के लिए बदलाव किया जा सकता है।