2016-04-11 2 views
-1

Я создал скрипт моей проблемы (однако в Fiddle он отображается правильно).Элементы ввода не имеют поля (Bootstrap)

https://jsfiddle.net/rjf8tsbk/1/

Как вы можете видеть, у меня есть форма с 4 входами. Всякий раз, когда я выполняю это в Webstorm, веб-сайт отображается в хроме, но для всех входов нет поля (без пробела). Я скопировал свой код на jsfiddle, и он выглядит корректно. Интересно, есть ли ошибка в webstorm или это может быть ошибка в бутстрапе? Это картина, как она выглядит нормально: enter image description here

EDIT (HTML-код)

<body> 
    <nav class="navbar navbar-inverse"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"> 
      <span class="sr-only">Toggle</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">LearnYou</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
     <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <div class="form-group"> 
      <input type="submit" value="Sign in" class="btn btn-success "> 
      </div> 
      <div class="form-group"> 
      <input type="button" value="Sign up" class="btn btn-success "> 
      </div> 
     </form> 
     </div> 
    </div> 
    </nav> 
</body> 

EDIT 2: Похоже, проблема возникает из "Jade", всякий раз, когда я выполнить простой HTML5 он визуализируется ? правильно, но когда я использую Jade она отображается wrong.Any Идеи Это мой Джейд Код:

nav(class="navbar navbar-inverse") 
     div(class="container") 
      div(class="navbar-header") 
       button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar") 
        span(class="sr-only") Toggle 
        span(class="icon-bar") 
        span(class="icon-bar") 
        span(class="icon-bar") 
       a(class="navbar-brand" ,href="#") LearnYou 
      div(id="navbar",class="navbar-collapse collapse") 
       form(class="navbar-form navbar-right", role="form") 
        div(class="form-group") 
         input(type="text", placeholder="Email", class="form-control") 
        div(class="form-group") 
         input(type="password", placeholder="Password", class="form-control") 
        input(type="submit", class="btn btn-success" ,value="Sign in") 
        input(type="button", class="btn btn-success", value="Sign up") 
+0

Вопросы, ищущие кода помощи должны включать кратчайшее сотрудничество необходимо воспроизвести его ** в самом вопросе **. Хотя вы предоставили ссылку [** на пример или сайт **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-paste-a-link-to-it), если ссылка должна стать недействительной, ваш вопрос не будет иметь ценности для других будущих пользователей SO с той же проблемой. –

ответ

0
.form-group { 
    margin-left:10px; 
} 
+0

Здравствуйте, Gavin, это решение да, но я ищу решение без добавления внешнего css, так как html отображается правильно в jsfiddle. – greedsin

+0

Было бы сложно дать окончательный ответ, не видя остальных стилей. –

+0

нет других ресурсов, кроме импорта bootstrap и jquery – greedsin

Смежные вопросы