1

選択と入力の右側が、ブートストラップの水平形式で整列していません。私のデバッグに基づいて、入力が親divの境界を超えているように見えますが、選択は適切に動作し、境界を尊重しています。入力を選択に合わせて「説得」するにはどうすればよいですか

これが私のフィドルです： http://jsfiddle.net/bjFXe/6/

CSS

input, select {
width: 100%;
overflow: hidden;
}

HTML

<form class="form-horizontal">
<div class="accordion row-fluid" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" href="#main">
                Main
            </a>

            <div id="main" class="accordion-body collapse in">
                <div class="accordion-inner">
                    <fieldset>
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="control-group warning">
                                    <label class="control-label" for="test1">test1</label>
                                    <div class="controls">
                                        <select id="test1">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" for="test2">Test2</label>
                                    <div class="controls">
                                        <input type="text" placeholder="Test2" id="test2">
                                    </div>
                                </div>
                            </div>
                            <div class="span6">
                                <div class="control-group">
                                    <label class="control-label" for="test3">test3</label>
                                    <div class="controls">
                                        <input type="text" id="test3">
                                    </div>
                                </div>
                                <div class="control-group warning">
                                    <label class="control-label" for="test4">test4</label>
                                    <div class="controls">
                                        <select id="test4">
                                            <option>option 1</option>
                                            <option>option 2</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>

4

2 に答える 2

1

最も簡単な解決策はinput-block-level、入力フィールドでクラスを使用することです。これにより、入力がブロック レベルに変換されるため、利用可能なすべてのスペースが占有されます。

<input type="text" placeholder="Test2" id="test2" class="input-block-level"/>

このクラスはブートストラップ フレームワークの一部であるため、カスタム CSS を追加する必要はありません。

于 2013-07-04T09:57:58.953 に答える
0

なぜこれが起こっているのか正確にはわかりません。パディング/マージンの問題のようです。ただし、絶対値の設定は機能します。

input, select {
    width: 12;
    overflow: hidden;
}
于 2013-07-04T09:49:17.200 に答える