为什么我的 Twitter Bootstrap 表单字段使用流体容器会溢出它们的井？

Question

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

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

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

为了直观，看看这个非常相似的问题： Twitter Bootstrap CSS static-fluid form positioning

这是头脑中的一切：

<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>

这是正文中的所有内容：

<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，但此时页面开始看起来很荒谬。其余的答案对我来说没有意义。

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

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

更新：图片

我的问题页面：

简化版：

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

Answer 1

任何人都可以找到

HTML：

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

CSS：

.form-control { box-sizing: border-box; } 

Answer 2

不幸的是，问题比这一切都更隐蔽。使用 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%，而不包括水平填充和边框宽度。 em>

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

不过，引导文本输入不会丢失所有内容，至少如果您使用允许客户端计算的 CSS 编译器。以更少为例

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

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

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

Answer 3

我在表单输入和面板正文中遇到了这个问题。我在以下项目中回答了它： Twitter Bootstrap: Stop input field extending beyond well

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

Answer 4

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

.input-example {
   width: 90%; 
}

我不是这方面的专家！我只是提供我所学到的知识，请不要将其视为经验丰富的开发人员的建议。努力回馈这个曾无数次挽救我生命的社区。​​p>

Answer 5

正如 Pavlo 在此答案中指出的那样：Twitter Bootstrap: Stop input field extending beyond well

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

Answer 6

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

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

Answer 7

通常我更喜欢在带有class="spanX" 的元素中使用另一个class="row-fluid" 和class="span12" 来获得某个元素的100% 宽度。这不会导致不同分辨率的错误。所以，我在你的元素中添加了另一个row-fluid 类，带有span4 类，并在新的row-fluid 中添加了带有span12 的div。您必须在某些情况下覆盖默认的 Bootstrap 设置才能获得所需的内容，因此我还在 <input /> 元素内添加了类 .my-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 demo，尝试调整屏幕大小。

​

Answer 8

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

但添加 css max-width:100% 将确保控制过大的输入。
例如将此添加到您的头部：

<style>
    input {
        max-width: 100%;
    } 
</style>