更改下拉列表的寬度

-2

目標：
更改使用引導程序v2的選擇下拉列表的寬度。更改下拉列表的寬度

問題：
我不知道如何改變它的寬度相對於引導。

信息：
請記住，我有相同的網頁放置三個下拉列表，這是我想改變寬度其中之一。

http://jsbin.com/roriyododa/edit?html,css,output

謝謝！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> 
 

 
<select style="display: none;" class="selectpicker" id="fromContent" name="From"> 
 
    <option value="122344">122344</option> 
 
    <option value="46731233320">46731233320</option> 
 
    <option value="abbb">abbb</option> 
 
    <option value="asd">asd</option> 
 
    <option value="d">d</option> 
 
    <option value="test">test</option> 
 
    <option value="testtest">testtest</option> 
 
    <option value="11">11</option> 
 
    <option value="24">24</option> 
 
    <option value="ddd">ddd</option> 
 
    <option value="gd">gd</option> 
 
    <option value="hn2">hn2</option> 
 
    <option value="jippo">jippo</option> 
 
    <option value="sdf">sdf</option> 
 
    <option value="sdfsdf">sdfsdf</option> 
 
</select> 
 
<div class="btn-group bootstrap-select"> 
 
    <button title="122344" data-id="fromContent" type="button" class="btn dropdown-toggle form-control selectpicker btn-default" data-toggle="dropdown"><span class="filter-option pull-left">122344</span>&nbsp;<span class="caret"></span> 
 
    </button> 
 
    <div class="dropdown-menu open"> 
 
    <ul class="dropdown-menu inner selectpicker" role="menu"> 
 
     <li class="selected" data-original-index="0"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>122344</span>"><span class="text">122344</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="1"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>46731233320</span>"><span class="text">46731233320</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="2"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>abbb</span>"><span class="text">abbb</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="3"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>asd</span>"><span class="text">asd</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="4"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>Feedex</span>"><span class="text">Feedex</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="5"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>test</span>"><span class="text">test</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="6"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>testtest</span>"><span class="text">testtest</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="7"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>11</span>"><span class="text">11</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="8"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>24</span>"><span class="text">24</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="9"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>ddd</span>"><span class="text">ddd</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="10"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>gd</span>"><span class="text">gd</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="11"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>hn2</span>"><span class="text">hn2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="12"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>jippo</span>"><span class="text">jippo</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="13"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>sdf</span>"><span class="text">sdf</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
     <li data-original-index="14"><a tabindex="0" class="" data-normalized-text="<span class=&quot;text&quot;>sdfsdf</span>"><span class="text">sdfsdf</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-01-12 What' sUP

使用此CSS：

.bootstrap-select button {width: 165px; position: relative;} 
.bootstrap-select button .caret {right: 10px; position: absolute;}

前瞻：

輸出：http://output.jsbin.com/sivagazeli/1

來源

2016-01-12 06:59:35

您需要將id添加到想要變寬的下拉列表中。然後將此css添加到它假設id是#myDD。

#myDD { min-width: 200px; }

它是min-width，它操縱引導程序中默認的下拉寬度。

來源

2016-01-12 07:02:48

-1

您可以給.css文件中的.open> .dropdown菜單類中的所需像素寬度：

來源

2016-01-12 07:03:17

更改下拉列表的寬度

回答

相關問題