Question

所以我有一个引导页面，我只是注意到在调整大小时输入将不会像页面上的其他内容一样响应缩放，当我有一个半宽的窗口时，它看起来像这样： sign in form half width

然后，当我调整到全屏时，我得到了这个： sign in form full width 直到我刷新浏览器，我得到了所需的响应： sign in full width after refresh

Rails代码：

<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（遗产我知道，但我需要与网站的其余部分进行交互）并在chrome和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标签的输入似乎在尺寸变化时调整大小）。提前谢谢。

编辑：我试图制作一个jsfiddle来说明这个问题并允许人们修补但是这会遇到不同的响应问题，奖励积分将会显示如何解决这个问题：）

编辑＃2：好的，所以这很奇怪，我进一步深入研究，元素的宽度是在element.style中设置的，但是我很难弄清楚它的设置位置（iirc element.style是设置在javascript中，这不会发生在jsfiddle，是什么导致我的问题，我无法弄清楚为什么它发生，因为我没有任何自定义的javascript为此，我使用相同版本的bootstrap为两者（虽然在我的实际项目中，它是从bootstrap-sass宝石出售）

编辑＃3添加了css

Answer 1

您可以在输入元素上放置span类。在这种情况下，span12，因为它们嵌套在.span6.offset3 div。

中

Answer 2

好的，我最终发现了问题所在。在找到宽度是通过element.style设置的时候，我设置了一个断点来找出设置这个属性的内容（因为它不会出现在jsfiddle中）。经过一些javascript挖掘后，我发现这是由附加的LastPass设置的。

禁用该插件可以解决问题。

编辑：这似乎只有在lastpass填写用户名和密码时才会出现。

编辑＃2：在使用lastpass打开票证后，可以通过取消选中＆＃34;突出显示输入框＆＃34;在每个浏览器的基础上解决此问题。在一般偏好中。等待听听他们是否可以提供全球解决方案。

Answer 3

尝试使用class =“input-block-level”

选中此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>

如何使twitter bootstrap输入响应

3 个答案: