Неправильный формат формы (Bootstrap)

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

Вот один пример того, как вы можете это сделать.

Начинать с структуры навигации по умолчанию ->Docs в качестве базы. Что касается формы, я не считаю, что есть встроенный способ размещения формы внутри меню dropdown, поэтому вам, скорее всего, потребуется применить некоторый CSS, чтобы он отображался соответствующим образом.

.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; 
 
    } 
 
}

<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>

Answer 2

Я понял это, ребята! Для заполнения всех элементов формы в другой таблице стилей было добавлено значение -15px. Я вошел в этот стиль и изменил дополнение на 15 пикселей вместо -15px.