如何使 twitter 引导输入响应式答案

【问题标题】：How to make twitter bootstrap input responsive如何使 twitter 引导输入响应式
【发布时间】：2015-11-12 03:24:32
【问题描述】：

所以我有一个引导页面，我只是注意到在调整输入大小时，当我有一个半角窗口时，输入不会像页面上的其他所有内容一样响应缩放：

然后当我调整到全屏时，我得到这个：直到我刷新浏览器才得到所需的响应：

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 on arch 上进行了测试。

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-sass gem 提供的）

编辑 #3 添加 css

【问题讨论】：

@pathros 已编辑并修复。

标签： ruby-on-rails twitter-bootstrap textbox responsive-design

【解决方案1】：

您可以将跨度类放在输入元素上。在本例中为 span12，因为它们嵌套在 .span6.offset3 div 中。

【讨论】：

不，我已经尝试过了，但它不起作用，我应该提一下，抱歉。

【解决方案2】：

尝试使用 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>

【讨论】：

你肯定会得到一个 +1 的好答案，因为它在 js fiddle 中完美运行（这很好）但它似乎不适用于我的应用程序，我已经挖了一点不知道为什么？输入块级如何阻止 lastpass 更改标签的宽度？我正在使用的其他东西可能会干扰最后一次通过吗？
啊，我知道了，如果您允许 lastpass 填写用户名和密码，您的解决方案将不起作用，那么元素将不会调整大小。无论如何，谢谢。
据我所知，输入块级别只适用.input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }，它仍然会被javascript设置的宽度覆盖

【解决方案3】：

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

禁用插件可以解决问题。

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

编辑 #2：在使用 lastpass 打开票证后，可以通过取消选中常规首选项中的“突出显示输入框”在每个浏览器的基础上解决此问题。等待听到他们是否可以提供全局修复。

【讨论】：