2013-05-12 67 views
0

我有一個下拉的形式,其寬度是目前由鏈路的激活下拉寬度的限制:引導下拉形成寬

the problem

我想根據需要把所有的形式一直延伸在一行上構成元素。我怎樣才能做到這一點?

當前HTML代碼:

<h1>Time Period: 
    <div id="date-filter-dropdown" class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
       <span class="primary">May 2013</span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li> 
        <form class="form-inline"> 
         <input type="text" class="input-mini filter-time-form" id="id_filter_form_year" maxlength="4" size="4" placeholder="YYYY" /> 
         <span class="filter-form-date-dividers">&dash;</span> 
         <input type="text" class="input-mini filter-time-form" id="id_filter_form_month" maxlength="2" size="2" placeholder="MM" /> 
         <span class="filter-form-date-dividers">&dash;</span> 
          <input type="text" class="input-mini filter-time-form" id="id_filter_form_day" maxlength="2" size="2" placeholder="DD" /> 

         <button type="button" class="btn btn-primary javascript-submit" id="filter-date-submit" onclick="filter_time();">Filter</button> 
        </form> 
       </li> 
      </ul> 
     </div> 
    </h1> 

JSFiddle

而且,不管出於什麼原因,單擊窗體上使得它現在消失。這不會發生在我正在使用的實際網頁上,只發生在JSFiddle頁面上。我已經通過按Tab鍵繞過了這個問題。

回答

1
h1 div#date-filter-dropdown ul.dropdown-menu { 
    white-space:nowrap; 
    min-width: 10px; 
} 
1

嘗試這些:

<ul class="dropdown-menu" id="ddown" role="menu"> //added a id for the dropdown 

,並添加這些JS:

var m = document.getElementById("date-filter-dropdown").offsetWidth; //get the date div width. 
// alert(m); 
var n = document.getElementById("ddown"); 
n.style.width = m+'px'; // set dropdown width. 

http://jsfiddle.net/Gz3JD/1/