带有 twitter-bootstrap 的下拉菜单 [英] Dropdown with a form inside with twitter-bootstrap

问题描述

我的 TopBar 中有一个下拉菜单，使用 Twitter Bootstrap CSS 框架构建.

我遇到了 3 个无法解决的问题:

1. 文本和密码输入字段太大了，我该如何调整它们?将下拉框放大也可以.
2. 字段的标签太暗了，我怎样才能把它们调亮一点?
3. 当我点击其中一个字段时，下拉菜单正在关闭.我必须重新打开它，然后才能输入，直到单击下一个字段.即使关闭下拉列表，这些值也会保留.我怎样才能让它保持打开状态?

这是问题 1 和 2 的屏幕截图:

还有现在的 TopBar 的 HTML.

<div class='topbar'><div class='topbar-inner'><div class='container'><h3><a href="/">网络世界</a><ul class='nav'><li>填料...</li><ul class='nav secondary-nav'>
<a href="#" class="dropdown-toggle">登录</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"类型=隐藏"值=&#x2713;"/><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40="/></div><fieldset class='textbox'><label id='js-username'><span>用户名</span><input autocomplete="on" id="username" name="username" type="text"/><label id='密码'><span>密码</span><input id="userpassword" name="userpassword" type="password"/></fieldset><fieldset class='subchk'><input name="commit" type="submit" value="登录"/></fieldset></表单>

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

我已经尝试复制 twitter 使用的登录表单的实现，但是当我尝试这样做时，TopBar 的高度约为 250 像素，并且下拉列表的内容是打开的，不可关闭.

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

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

解决方案

尝试在您的 javascript 中的某处添加以下代码.它应该阻止它发生.

 $('.dropdown-menu').find('form').click(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 的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！