html - 带有 twitter-bootstrap 的下拉列表

Question

我的 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">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>

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

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

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

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

Answer 1

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

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