下拉与一个窗体里面与twitter-bootstrap

问题描述

我有一个下拉列表在我的TopBar，建立与Twitter Bootstrap CSS框架。

我有3个问题，我找不到任何解决方案：

1. 文本和密码输入字段过大，我如何调整它们？


2. 字段的标签太暗，我们如何减轻它们呢？


3. 当我点击其中一个字段时，下拉菜单就会关闭。我必须重新打开它，然后我可以输入，直到点击下一个字段。即使下拉菜单已关闭，值也会保留。




这是问题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>登录< / a> 
< div class ='dropdown-menu'id ='signin-dropdown'> 
< form accept-charset =UTF-8action =/ sessionsmethod =post>< div style =margin：0; padding：0; display：inline> ; input name =utf8type =hiddenvalue =&＃x2713; />< input name =authenticity_tokentype =hiddenvalue =4L / A2ZMYkhTD3IiNDMTuB / fhPRvyCNGEsaZocUUpw40 =/>< / div> 
< fieldset class ='textbox'> 
< label id ='js-username'> 
< span>用户名< / span> 
< input autocomplete =onid =usernamename =usernametype =text/> 
< / label> 
< label id ='password'> 
< span>密苏里< / span> 
< input id =userpasswordname =userpasswordtype =password/> 
< / label> 
< / fieldset> 
< fieldset class ='subchk'> 
< input name =committype =submitvalue =Log In/> 
< / fieldset> 
< / form> 
< / div> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div> 
  

rails需要隐藏输入并自动生成。





我已经尝试复制twitter使用的登录表单的实现，但是当我尝试时，TopBar的高度大约为250px，下拉列表的内容是打开的，不可关闭。





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





有人可以帮我解决这个问题吗？

解决方案

它应该阻止它发生。

  $（'。dropdown-menu'）。find（'form'）。 function（e）{
 e.stopPropagation（）; 
}）; 
  




I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework.

I have 3 problems with it that I can't find any solution to:

1. The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too.
2. The labels for the fields are too dark, how can I lighten them up a bit?
3. 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:

Also here is the HTML for the TopBar as it is now.

<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="&#x2713;" /><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.

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.

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.

Can someone help me with this?

解决方案

Try adding the code below somewhere in your javascript. It should stop it from happening.

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

这篇关于下拉与一个窗体里面与twitter-bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！