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

前端之家收集整理的这篇文章主要介绍了html5 – 下拉与一个窗体里面与twitter-bootstrap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个下拉在我的TopBar,建立与Twitter Bootstrap CSS框架。

我有3个问题,我找不到任何解决方案:

>文本和密码输入字段太大,我如何调整它们?使下拉框更大也会OK。
>字段的标签太暗,我怎么能减轻他们一点?
>当我点击其中一个字段时,下拉菜单就会关闭。我必须重新打开它,然后我可以输入,直到点击下一个字段。即使下拉菜单关闭,值也会保留。如何让它保持开放?

这里是问题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>

有轨道需要隐藏输入和自动生成

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

我迄今没有自定义CSS或JavaScript,除了bootstrap文档建议的正文中的40px的顶部填充。

有人可以帮我弄这个吗?

解决方法

请尝试将下面的代码添加到javascript的某个位置。它应该阻止它发生。
$('.dropdown-menu').find('form').click(function (e) {
    e.stopPropagation();
  });

猜你在找的HTML5相关文章