Html 带有 twitter-bootstrap 的下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8110356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropdown with a form inside with twitter-bootstrap
提问by NobbZ
I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework.
我的 TopBar 中有一个 Dropdown，它是用 Twitter Bootstrap CSS 框架构建的。
I have 3 problems with it that I can't find any solution to:
我有 3 个问题，我找不到任何解决方案：
- The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
- The labels for the fields are too dark, how can I lighten them up a bit?
- The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open?
- 文本和密码输入字段太大了，我该如何调整它们？使下拉框更大也可以。
- 字段的标签太暗，我怎样才能使它们变亮一点？
- 当我单击其中一个字段时，下拉列表正在关闭。我必须重新打开它，然后我才能输入，直到单击下一个字段。即使关闭下拉列表，这些值也会保留。我怎样才能让它保持打开状态？
Here is a screenshot of problems 1 and 2:
这是问题1和2的截图：
Also here is the HTML for the TopBar as it is now.
这里也是 TopBar 的 HTML，就像现在一样。
<div class='topbar-wrapper'>
<div class='topbar'>
<div class='topbar-inner'>
<div class='container'>
<h3>
<a href="/">Webworld</a>
</h3>
<ul class='nav'>
<li>FILLER...</li>
</ul>
<ul class='nav secondary-nav'>
<li class='dropdown' data-dropdown='dropdown'>
<a href="#" class="dropdown-toggle">Login</a>
<div class='dropdown-menu' id='signin-dropdown'>
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
<fieldset class='textbox'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" />
</label>
<label id='password'>
<span>Passwort</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
There hidden input is needed by rails and autogenerated.
rails 需要隐藏输入并自动生成。
I've already tried to copy the implementation of the login form that twitter uses, but when I tried that, the TopBar is about 250px in height and the content of the dropdown is open, not closeable.
我已经尝试复制 twitter 使用的登录表单的实现，但是当我尝试这样做时，TopBar 的高度约为 250 像素，并且下拉列表的内容是打开的，不可关闭。
I have no custom CSS or JavaScript so far, except for the top-padding of 40px in the body as suggested by the bootstrap docs.
到目前为止，我没有自定义 CSS 或 JavaScript，除了 bootstrap 文档建议的正文中 40px 的顶部填充。
Can someone help me with this?
有人可以帮我弄这个吗？
回答by Travis
Try adding the code below somewhere in your javascript. It should stop it from happening.
尝试在您的 javascript 中的某处添加以下代码。它应该阻止它发生。
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
回答by Mike
(Twitter Bootstrap 2.x)
（推特引导程序 2.x）
You may want to move the contents of style=""to your stylesheets...
您可能希望将 的内容移动style=""到样式表...
If user entered wrong password:
如果用户输入错误密码：
add class opento li class="dropdown open"
添加类open到li class="dropdown open"
and class errorto fieldset class="control-group error"
和类error以fieldset class="control-group error"
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
<div class="dropdown-menu">
<form action="" id="form_login" style="margin: 0; padding: 3px 15px" accept-charset="utf-8" method="post">
<fieldset class="control-group">
<label for="form_email" class="control-label">Email address</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-envelope"></i></span>
<input type="email" name="email" id="form_email" autocomplete="on" class="span2">
</div>
</div>
</fieldset>
<fieldset class="control-group">
<label for="form_password" class="control-label">Password</label>
<div class="controls">
<div class="input-prepend" style="white-space: nowrap">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" name="password" id="form_password" class="span2">
</div>
</div>
</fieldset>
<label class="checkbox">
<input type="checkbox" name="remember" value="true"> Remember me
</label>
<p class="navbar-text">
<button type="submit" class="btn btn-primary">Login</button>
</p>
</form>
</div>
</li>
</ul>
You don't need any extra css or javascript to make this look nice (with TB2.x)
你不需要任何额外的 css 或 javascript 来让它看起来不错（使用 TB2.x）
回答by Michael Grischenko
In case you don't want to stop propagation of your events, or that solution didn't work for you, you can add this code somewhere near initialization of bootstrap-dropdown:
如果您不想停止事件的传播，或者该解决方案对您不起作用，您可以在 bootstrap-dropdown 的初始化附近添加此代码：
$('html').off('click.dropdown.data-api');
$('html').on('click.dropdown.data-api', function(e) {
if(!$(e.target).parents().is('.dropdown-menu form')) {
$('.dropdown').removeClass('open');
}
});
回答by kajo
For your third question - In your bootstrap-dropdown.js comment source code row
对于您的第三个问题 - 在您的 bootstrap-dropdown.js 注释源代码行中
$('html').on('click.dropdown.data-api', clearMenus)
and write there this:
并在那里写下：
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("dropdown-menu") &&
!$clicked.parents().hasClass("dropdown-menu")){
clearMenus();
}
});
回答by DregondRahl
https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559
https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559
max-width is set to 220px, remove the attribute and it will stretch itself.
max-width 设置为 220px，删除该属性，它将自行拉伸。
回答by guruguldmand
Its looks like a CSS based problem u are facing.
它看起来像是您面临的基于 CSS 的问题。
I fixed it with the following styles:
我用以下样式修复了它：
#signin-dropdown {
padding-left: 5px;
padding-right: 5px;
padding-top: 1em;
}
#signin-dropdown form {
margin:0px;
}
#signin-dropdown form .textbox {
margin-bottom:0em;
padding-top:0em;
}
#signin-dropdown form .subchk {
margin-bottom: 5px;
padding-top: 8px;
}
#username, #password, #userpassword {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 0px;
text-align: left !important;
width: 140px;
}
回答by marimaf
About your questions 1 and 2.
关于你的问题1和2。
Have you tried setting the length of the input? You can do this by setting the "size" attribute of the input tag. You can read more here
Did you try changing the style of the label? For example:
您是否尝试过设置输入的长度？您可以通过设置输入标签的“大小”属性来做到这一点。你可以在这里阅读更多
您是否尝试更改标签的样式？例如：
<span style="color:#FFFFFF">Username </span>
<span style="color:#FFFFFF">Username </span>
回答by porya ras
you just add your content in <form></form>tag
您只需在<form></form>标签中添加您的内容
like this:
像这样：
<div class="dropdown dropdown-scroll" id="selectedClient">
<button class="btn btn-block btn-lg btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
?????? <span class="caret"></span>
</button>
<div class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu1">
<button type="button" class="close">×</button>
<form>
<ul>
<li role="presentation">
<input id="searchSubClientInput" type="text" class="form-control" placeholder="????? ?? ???? ??? ????????" ng-model="query">
</li>
</ul>
</form>
<ul class="select-list scrollable-menu">
<li class="dropdown-header">????</li>
</ul>
</div>
</div>