Question

我有以下html：

<div class="container-fluid">
<div class="row-fluid">
    <div class="span8">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label">Field 1</label>
            <div class="controls">
                <input type="text" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Field 2</label>
            <div class="controls">
                <div class="input-append">
                <input type="text" />
                    <span class="add-on">%</span>
                </div>
                </div>
            </div>
        </form>
    </div>
</div>

以下风格：

输入{ 宽度：100％; }

字段1的输入框按预期工作。但是，字段2似乎有一些固定的宽度。为什么会发生这种情况，有没有办法解决它？我希望附加的输入在跨度内具有相同的100％宽度以匹配其他文本字段。

此处示例：http://jsfiddle.net/PilotBob/erT7d/

Answer 1

这是因为在第二个输入中，您有另一个容器，.input-append，它比您想象的要小。

同样将其设为width:100%;， solved this problem.

Answer 2

这是因为bootstrap将display的{{1}}的默认div值更改为class input-append从block更改为inline-block。 / p>

您可以将width:100%设置为使输入的宽度与正常相同，但add-on会溢出或将其设置为width:95%。

First solution with width:100%

Second solution with width:95%

Answer 3

我已保存此文件并运行它。没有发现问题

<style>
input{width: 100%;}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">Field 1</label>
        <div class="controls">
            <input type="text" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Field 2</label>
        <div class="controls">
            <div class="input-append">
            <input type="text" />
                <span class="add-on">%</span>
            </div>
            </div>
        </div>
    </form>
    </div>
</div>

但是在你提到的网址上它不起作用我不知道为什么？如果在其他地方出现问题，可能会有一些原因

容器宽度不足，省略父容器或容器宽度将解决问题
您可能稍后会在css中覆盖宽度，请使用“input {width：100％！importtant;}”

为什么input-append类会破坏流体网格中输入的宽度？

3 个答案: