使用twitter-bootstrap下载表单

Question

我的TopBar中有一个Dropdown,使用Twitter Bootstrap CSS框架构建.

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

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

以下是问题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的高度约为250px,下拉列表的内容是打开的,不可关闭.

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

有人可以帮我弄这个吗？

Answer 1

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

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

Answer 2

(Twitter Bootstrap 2.x)

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

如果用户输入了错误密码:

添加类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

如果您不想停止传播事件,或者该解决方案不适合您,您可以在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

max-width设置为220px,删除属性,它将自行伸展.