Как сделать ответ на загрузочный ввод twitter

Question

Итак, у меня есть страница начальной загрузки, и я только заметил, что при изменении размера вход не будет масштабироваться как все остальное на странице, когда у меня есть окно в полуширине, это выглядит так:

Тогда при изменении размера на полный экран, я получаю это: и это пока я не обновить браузер, который я получаю желаемый ответ, который это:

Рельсы Код:

<h1>Sign in</h1> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6 offset3"> 
     <%= form_for(:session, url: sessions_path) do |f| %> 

     <%= f.label :email %> 
     <%= f.email_field :email%> 

     <%= f.label :password %> 
     <%= f.password_field :password %> 
     <% end %> 
    </div> 
    </div> 
</div> 

HTML код: (ненужные вещи удалены)

<h1>Sign in</h1> 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6 offset3"> 
     <form> 

     <label for="session_email">Email</label> 
     <input id="session_email" name="session[email]" type="email" /> 

     <label for="session_password">Password</label> 
     <input id="session_password" name="session[password]" type="password" /> 
     </form> 
    </div> 
    </div> 
</div> 

Я использую Twitter Bootstrap 2.3.2 (наследие Я знаю, но мне нужно взаимодействовать с остальной частью сайта) и испытания на хром и firefox на арке.

CSS:

.input { 
    display: block; 
    width: 100%; 
    min-height: 30px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Похоже, что это должно быть довольно просто исправить, но, глядя вокруг, я не могу найти то, что нужно сделать, чтобы это исправить. выглядящий here, это определенно кажется возможным (входы с тегами span, похоже, изменяются при изменении размера). Заранее спасибо.

EDIT: Я пытался сделать jsfiddle, чтобы проиллюстрировать эту проблему и дать людям возможности повозиться, но это страдает от другой проблемы отзывчивой, бонусные баллы будут приходить для показа, как исправить это тоже :)

EDIT # 2 : Ok, так что это странно, я вырыл еще больше, ширина элемента устанавливается в element.style, но мне трудно понять, где это установлено (iirc element.style установлен в javascript, это делает не происходит в jsfiddle и является причиной моей проблемы, я не могу понять, почему это происходит, поскольку у меня нет никакого пользовательского javascript для этого, и я использую ту же самую версию bootstrap для обоих (хотя в моем фактическом проект продается из самоцвета самоцветов)

EDIT # 3 добавлен css

Answer 1

Хорошо, я выяснил, в чем проблема. Обнаружив, что ширина была задана с помощью element.style, я установил точку останова, чтобы узнать, что устанавливало это свойство (как это не происходит в jsfiddle). после немного копания javascript я узнал, что это было установлено дополнением LastPass.

Отключение надстройки устраняет проблему.

EDIT: Это происходит, только если lastpass заполняет имя пользователя и пароль.

EDIT # 2: после открытия билета с пропуском эта проблема может быть решена на основе браузера, сняв флажок «Выделить поля ввода» в общих предпочтениях. Ожидание услышать, могут ли они предложить глобальное решение.

Answer 2

Вы можете поместить классы классов на входные элементы. В этом случае span12, так как они вложены в div .span6.offset3.

Answer 3

Попробуйте использовать класс = "вход-уровень блока"

Проверить это fiddle

<h1>Sign in</h1> 

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span6 offset3"> 
      <form> 
       <label for="session_email">Email</label> 
       <input class="input-block-level" id="session_email" name="session[email]" type="email" /> 
       <label for="session_password">Password</label> 
       <input class="input-block-level" id="session_password" name="session[password]" type="password" /> 
      </form> 
     </div> 
    </div> 
</div>