1

私は次の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>

そして次のスタイル：

入力{幅：100％; } </ p>

フィールド1の入力ボックスは期待どおりに機能します。ただし、フィールド2は一定の幅を取得しているようです。なぜこれが発生し、それを修正する方法がありますか？他のテキストフィールドと一致するように、入力に追加されたものをスパン内で同じ100％の幅にします。

ここでの例：http：//jsfiddle.net/PilotBob/erT7d/

4

3 に答える 3

1

これは、2番目の入力に、思ったよりも小さい別のコンテナ、があるためです。.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％の2番目のソリューション

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

しかし、あなたが言及したURLでは、それは機能していません。理由はわかりませんか？他の場所で問題が発生している場合は、いくつかの理由が考えられます

  1. コンテナの幅が不十分な場合は、親またはコンテナの幅を省略して問題を解決します
  2. 後でcssで幅を上書きした可能性があります。「input{width：100％！importtant;}」を使用してください。
于 2012-11-08T18:28:13.453 に答える