[英]Bootstrap dropdown form width
我有一個下拉表單,其寬度當前受激活下拉列表的鏈接寬度的限制:
我希望表單盡可能擴展到將所有表單元素放在一行上。 我怎樣才能做到這一點?
當前的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">‐</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">‐</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頁面上。 我暫時按Tab鍵繞過了這個問題。
h1 div#date-filter-dropdown ul.dropdown-menu {
white-space:nowrap;
min-width: 10px;
}
試試這些:
<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.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.