0

プロジェクトで Bootstrap3 を使用しています。フォームをジャンボトロンに同封しました。これが私のフォームの外観です(今のところ見栄えがよくありません): ここに画像の説明を入力

私はそれをより良くしようとしました。しかし、それは悪化しています。すべてのフィールドを 1 行にし、送信ボタンをその下の中央に配置します。やり方がわかりません。Bootstrap3 を使用するのは非常に新しいです。

ここに私のhtmlコードがあります:

<form  action="" id="id-exampleForm" class="form-inline" method="post" >
    <input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
    <div id="div_id_price_order" class="form-group">
        <label for="id_price_order_0" class="control-label col-lg-2 requiredField">
            price order
            <span class="asteriskField">*</span>
        </label>
        <div class="controls col-lg-12">
            <label class="radio">
                <input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
            <label class="radio">
                <input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_newest_entry" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_newest_entry" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
                    latest date
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_latest_year" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_latest_year" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
                    latest year
                </label>
            </div>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>

編集:

私はこのようなものが欲しい: 私はパワーポイントでこれを編集しました. なので見た目はあまり良くありません。 ここに画像の説明を入力

4

2 に答える 2