用twitter-bootstrap里面的表单下拉菜单

我的TopBar中有一个Dropdown，使用Twitter Bootstrap CSS框架构build。

我有3个问题，我无法find任何解决scheme：

1. 文本和密码input字段太大，我怎么调整它们？ 使下拉框变大也可以。
2. 田地的标签太黑了，我怎么能把它们照亮一点？
3. 点击进入其中一个字段时，下拉菜单正在closures。 我必须重新打开它，然后我可以键入，直到在下一个字段中单击。 即使closures下拉菜单，也会保留这些值。 我怎样才能让它保持开放？

以下是问题1和问题2的屏幕截图：

这里也是现在的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> 

有轨道和自动生成需要隐藏的input。

我已经尝试复制Twitter使用的login表单的实现，但是当我尝试时，TopBar的高度大约为250像素，下拉列表的内容是打开的，不可closures。

到目前为止，我没有自定义CSS或JavaScript，除了bootstrap文档build议的正文中的顶部填充40px。

有人可以帮我弄这个吗？

Answer 1

尝试添加下面的代码在您的JavaScript的某处。 它应该阻止它发生。

  $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); 

Answer 2

（Twitter Bootstrap 2.x）

您可能希望将style=""的内容移动到样式表中…

如果用户input错误的密码：

添加课堂open给li class="dropdown open"

和类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> 

你不需要任何额外的CSS或JavaScript来使这看起来不错（与TB2.x）

Answer 3

如果你不想停止你的事件的传播，或者这个解决scheme不适合你，你可以在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'); } }); 

Answer 4

对于你的第三个问题 – 在你的bootstrap-dropdown.js注释源代码行中

 $('html').on('click.dropdown.data-api', clearMenus) 

并写在那里：

 $(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.hasClass("dropdown-menu") && !$clicked.parents().hasClass("dropdown-menu")){ clearMenus(); } }); 

Answer 5

https://github.com/twitter/bootstrap/blob/master/bootstrap.css#L1559

最大宽度设置为220px，删除该属性，它会自己伸展。

Answer 6

它看起来像一个基于CSS的问题，你正面临着。

我用下面的样式修复它：

 #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; } 

Answer 7

关于你的问题1和2。

1. 你有没有尝试设置input的长度？ 您可以通过设置input标签的“尺寸”属性来实现这一点。 你可以在这里阅读更多

2. 你有没有尝试改变标签的风格？ 例如：

 <span style="color:#FFFFFF">Username </span> 

Answer 8

你只需在<form></form>标签中添加你的内容

喜欢这个：

  <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">&times;</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>