Question

不确定为什么我的表单看起来不正确。这是导航栏的代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header col-lg-12">
          <a class="navbar-brand" href="#">Behind the Wheel</a>
          <a class="navbar-brand" href="#">Traffic School</a>
          <a class="navbar-brand" href="#">FAQ</a>
          <div class="dropdown navbar-brand navbar-right col-md-2">
              <span class="glyphicon glyphicon-user dropdown-toggle"datatoggle="dropdown"></span>
           <form class="form-horizontal dropdown-menu" role="form">       
            <div class="form-group has-feedback" role="form">
                <label for="emailInput" class="control-label">Email</label>
                <input type="email" class="form-control" placeholder="Email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                  <label for="passwordInput" class="control-label">Password</label>
                  <input type="password" class="form-control" placeholder="Password">
                  <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
           </form>
        </div>
        </div>

      </div>

    </nav>

这里有一张当我点击用户glyphicon来激活下拉列表时会发生什么的图片，显示我的表单是如何搞砸的：form pic

Answer 1

以下是如何执行此操作的一个示例。

从默认导航结构开始 - ＆gt; Docs作为基础。就表格而言，我不相信有一种内置的方式可以在dropdown菜单中放置表单，因此您很可能需要应用一些CSS，因此它可以＃39 ; s显示得恰到好处。

＆＃13;

.dropdown-menu.dropdown-form {
  padding: 10px 25px;
  background: #222;
}
.dropdown-menu.dropdown-form label {
  color: white;
}
@media (min-width: 768px) {
  .dropdown-menu.dropdown-form {
    min-width: 250px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Behind the Wheel</a>
        </li>
        <li><a href="#">Traffic School</a>
        </li>
        <li><a href="#">FAQ</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span></a>
          <ul class="dropdown-menu dropdown-form">

            <form class="form-horizontal" role="search">
              <div class="form-group has-feedback" role="form">
                <label for="emailInput" class="control-label">Email</label>
                <input type="email" class="form-control" placeholder="Email">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <label for="passwordInput" class="control-label">Password</label>
                <input type="password" class="form-control" placeholder="Password">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
              </div>
            </form>

          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 2

我想出来了！对于另一个样式表中的所有表单元素，填充设置为-15px。我进入了样式表并将填充更改为15px而不是-15px。

表格大小不对（Bootstrap）

2 个答案: