低分辨率的Bootstrap响应输入宽度

时间:2013-07-01 15:12:32

标签: css html5 twitter-bootstrap responsive-design

也许以前曾经问过这个问题,或者甚至可能是一个不应该问的问题。 我正在使用Twitter bootstrap及其响应式CSS。 我的应用程序中的输入字段应该非常小,因为我只输入数字0-999。

我在highres视口上看起来正确的输入上设置了class =“span1”。 但是,在调整窗口大小或在移动设备上查看时,输入字段的宽度会超出此用例所需的范围。

当视口分辨率降低时,有没有办法强制输入字段的宽度保持不变?

2 个答案:

答案 0 :(得分:2)

实际上,这就是Bootstrap的工作原理。具有.spanX类之一的所有内容在分辨率上都获得100%宽度< 768px。

如果您想强制使用较小的宽度,可以选择更快的选项:

  • 手动设置该输入的宽度(响应!);
  • 使用.input-mini / .input-small 也不响应
  • );

如果您可以花费更多时间在此,请为输入字段创建另一个网格,当媒体查询与<宽度为768像素。

请注意Bootstrap 3即将发布。它们将包括一个移动优先网格,让您可以优雅地做你想做的事 Bootstrap的竞争对手Foundation已经包含了这个。

答案 1 :(得分:1)

您可以在输入中使用input-mini或input-small类:

http://twitter.github.io/bootstrap/base-css.html#forms(搜索相对大小调整)

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">