41

更新：这里的问题演示：http: //jsfiddle.net/fdB5Q/embedded/result/

从大约 767px 到 998px，表单域比包含井宽。

小于 767px 并且整个表单区域移动到新行。当浏览器窗口大约 200 像素宽时呈现的页面显示完美。如您所料，表单字段会缩小。

对于视觉，看看这个非常相似的问题： Twitter Bootstrap CSS static-fluid form Positioning

这是 Head 中的所有内容：

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

这是 Body 中的所有内容：

<div class="container-fluid">

<div class="row-fluid">

<div class="span8">
<p>Some Content.</p>
</div>

<div class="span4">
  <div class="well">    
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
      <input type="text" class="input-xlarge" name="name" id="name" maxlength="100" />
      </div>
    </div>
  </div>
</div>

</div>

</div>

我想我误解了框架的某些部分。我不应该使用液体容器吗？我究竟做错了什么？我可以拼凑一些东西来解决这个问题，但我认为问题可能是我做错了大局。

我尝试将跨度更改为 7 和 5，但仍然出现相同的错误。我尝试了 6 和 6，但此时页面开始看起来很荒谬。其余的答案对我来说没有意义。

我将输入类更改为大而不是 xlarge。它仍然有一个溢出的宽度范围，如果显示器上有空间，我真的想要更宽的表单域。

我想避免水平滚动条，并且我希望页面文本在我的智能手机上的横向或纵向模式下具有相同的大小。

更新：图片

我的问题页面：

问题页面

简化版：

简单版

浏览器宽度为 200 像素的简化版本：

宽度为 200 像素的简单版本

4

8 回答 8

62

输入的 html 标签及其对应的.input-*样式只设置 css width。这是设计使然。

但是添加 cssmax-width:100%将确保控制过大的输入。
例如，将其添加到您的头部：

<style>
    input {
        max-width: 100%;
    } 
</style>
于 2012-08-07T23:19:52.083 回答
4

通常我更喜欢使用另一个元素class="row-fluid"和class="span12"元素class="spanX"来获得某些元素的 100% 宽度。这不会导致不同分辨率的错误。所以，我row-fluid在你的元素中添加了另一个类span4，并在新row-fluid添加的 div 中添加了span12. 您必须在某些情况下覆盖默认的 Bootstrap 设置才能获得所需的内容，因此我还在元素.my-input内部添加了类<input />以获得 100% 宽度并删除左右填充（填充会导致右侧出现错误）。这是代码：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    <label class="control-label" for="name">Your Name</label>
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

和用于覆盖的 CSS 类

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

你可以看到和Jsfiddle 演示，尝试调整屏幕大小。

​</p>

于 2012-08-07T23:23:29.747 回答
4

我刚刚遇到了这个问题，并且在检查引导文档以获取表单输入时，它指出“使用相对大小调整类，如 .input-large 或使用 .span* 类将您的输入与网格列大小匹配。”

我的引导行设置为 span9 的内容和 span3 的侧边栏。设置<input class='span3'/>为我解决了这个问题，随着屏幕尺寸的减小，输入框仍保留在侧边栏中。

于 2012-09-05T09:01:41.940 回答
1

在玩完这些 FOREVER 之后，只需一点输入（似乎）。我使用一个简单的宽度属性并将其设置为 85% 到 95%，具体取决于容器、填充和其他 css 因素，以防止输入字段实际拉伸到容器边缘。

.input-example {
   width: 90%; 
}

我不是这方面的专家！我只是提供我所学到的知识，请不要将其视为经验丰富的开发人员的建议。试图回馈一个在无数场合挽救了我生命的社区。

于 2014-02-10T02:59:30.783 回答
1

不幸的是，问题比这一切都更隐蔽。使用 max-widths 对我没有任何帮助。而且我讨厌看起来很糟糕的东西，所以我深入研究了一下......

它归结为表单控件的 css 声明中的这三行：

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

当设置文本类型输入元素的宽度时，水平填充和边框将添加到 100%，而不是从中获取。因此，如果 100% 的宽度 w 是 500px，那么文本输入表单控件的宽度变为 w+12+12+1+1, 526px。额外的 26px 是一个常数，这意味着除非动态计算宽度百分比为 100%*(w/(w+26px)) 或 100%-26px，否则事情永远不会出现。

我个人认为这是 html/css 接口的定义或实现中的错误（我不知道是哪个，我真的不想尝试在标准的流沙中找到参考。）如果你假设输入字段将是 100% 宽度，则需要应用校正以使边距内的宽度为 100%，而不是 100%，而不包括水平填充和边框宽度。

而且，顺便说一下，百分比值或固定大小无关紧要；它们也偏离了 26 像素。您需要从宽度中过滤掉这些 26px。

但是，引导文本输入并不会丢失所有内容，至少如果您使用的是允许客户端计算的 CSS 编译器。例如，在更少的情况下

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

会让一切变得更好。请注意，电子邮件和密码类型（至少）也有同样的问题。

当然，26px 有点脆弱，但是常量被硬编码到表单控件声明中，所以你的手有点束缚。一个测试会很好，检查渲染控件的大小以捕获引导升级时的 CSS 声明更改，但不是今晚，谢谢。

于 2015-06-17T02:20:57.560 回答
0

正如 Pavlo 在此答案中指出的那样：Twitter Bootstrap：停止输入字段超出范围

使用类input-block-level代替 input-xlarge（或其他大小）也可以解决问题。

于 2013-06-28T03:05:20.453 回答
0

我在表单输入和面板正文中遇到了这个问题。我在以下项目中回答了它： Twitter Bootstrap：停止输入字段超出范围

我的问题是表格溢出了。这允许输入效仿。通过修复表单的最大宽度（最大宽度：100%），我能够修复输入以及可能放置在表单内的任何其他内容。

于 2015-03-02T15:42:42.973 回答
0

任何人都可以找到

html:

<input class="form-control" placeholder="Threshold Type">

CSS：

.form-control { box-sizing: border-box; }
于 2019-03-06T21:27:26.803 回答