1

2 つの入力と 2 つのボタンを含む非常に単純なフォームを作成しました。フォームの幅を 6 スパンにして中央に配置したい場合。

以下は私のコードです：

<div class="container-fluid padded">
    <div class="row">
        <div class="container">
            <div class="row">
                <!--filtry-->
                <div class="span6 offset3 padded" style="border: 1px solid black;">
                    <form action="#" method="get" class="form-horizontal">
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label">Data od</label>
                                <div class="controls">
                                    <input type="text" id="dataOd" class="input-xlarge" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">Data do</label>
                                <div class="controls">
                                    <input type="text" id="dataDo" class="input-xlarge" />
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="pull-right"> 
                                   <a class="btn wczytaj" href="#"><i class="icon-play icon-white"></i>Wczytaj</a>
                                   <a class="btn btn-info disabled eksportuj" href="#" id="eksportuj"><i class="icon-download-alt icon-white"></i>Eksportuj</a>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

フルサイズのブラウザでの私のフォームは次のようになります。 ここに画像の説明を入力

しかし、サイズを変更すると、次の結果が得られます。 ここに画像の説明を入力

すべての解像度で入力幅が 100% になるようにコードを変更するにはどうすればよいですか? 簡単な方法はありますか、またはブートストラップ全体を微調整する必要がありますか?
入力に ​​span* クラスを追加しようとしましたが、うまくいきませんでした。SO ( https://stackoverflow.com/a/11193864/965722 )にも同様の質問がありますが、答えには JavaScript が含まれており、それを避けたいと思います。

これが私のコードのjsfiddleです：http://jsfiddle.net/Misiu/HdSEn/

4

2 に答える 2

0

これで問題が解決することを願っています:

JSFiddleデモ

CSS :

input[type="text"] {
    min-height:30px;
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
于 2013-07-18T09:44:33.087 に答える