1

I have the following 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>

​</p>

And the following style:

input { width: 100%; }​</p>

Field 1's input box works as expected. However, field 2 seems to get some fixed width. Why does this happen and is there a way to fix it? I would like the appended to input to be the same 100% width within the span to match the other text fields.

Example here: http://jsfiddle.net/PilotBob/erT7d/

4

3 回答 3

1

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

设置它width:100%;为好，解决了这个问题。

于 2012-11-08T18:17:43.677 回答
1

发生这种情况是因为引导程序更改了具有from到的默认display值。divclass input-appendblockinline-block

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

第一个解决方案的宽度：100%

第二种解决方案，宽度：95%

于 2012-11-08T18:19:34.580 回答
0

我已保存此文件并运行它。未发现任何问题

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

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

  1. 容器宽度不足，省略父级或容器宽度即可解决问题
  2. 您可能稍后在 css 中覆盖了宽度，请使用“input { width: 100% !importtant;}”
于 2012-11-08T18:28:13.453 回答