ホームページ >ウェブフロントエンド >htmlチュートリアル >ブートストラップ スタイルの問題_html/css_WEB-ITnose

ブートストラップ スタイルの問題_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:11:311059ブラウズ

        <div class="form-group">            <label class="control-label col-md-1" for="Receiver">收件人</label>            <div class="col-md-10" style="border:1px dashed #ff0000;">                <input type="text" class="form-control" />                <input class="form-control" data-val="true" data-val-length="4到20个字符" data-val-length-max="20" data-val-length-min="4" data-val-required="必填" id="Receiver" name="Receiver" type="text" value="" />                <span class="field-validation-valid text-danger" data-valmsg-for="Receiver" data-valmsg-replace="true"></span>            </div>        </div>


ブートストラップ スタイルで幅が 100% に設定されている場合、フォーム コントロールが占める量がこれほど少ないのはなぜですか? グリッドはおそらく 2 つだけです


ディスカッションへの返信 (解決策)

<div class="form-group col-md-12">
外側の div にポゼッション フェンスを設定してみてください

<div class="form-group col-md-12">
外側の div にポゼッション フェンスを設定してみてください

試してみました~うまくいきません~うーん~
これはうまくいきませんうまくいきません
<div class="container">	<div class="row">        <div class="form-group">            <label class="control-label col-md-1" for="Receiver">收件人</label>            <div class="col-md-10">                <input class="form-control" data-val="true" data-val-length="4到20个字符" data-val-length-max="20" data-val-length-min="4" data-val-required="必填" id="Receiver" name="Receiver" type="text" />                <span class="field-validation-valid text-danger" data-valmsg-for="Receiver" data-valmsg-replace="true"></span>            </div>        </div>	</div></div>

<div class="container">	<div class="row">        <div class="form-group">            <label class="control-label col-md-1" for="Receiver">收件人</label>            <div class="col-md-10">                <input class="form-control" data-val="true" data-val-length="4到20个字符" data-val-length-max="20" data-val-length-min="4" data-val-required="必填" id="Receiver" name="Receiver" type="text" />                <span class="field-validation-valid text-danger" data-valmsg-for="Receiver" data-valmsg-replace="true"></span>            </div>        </div>	</div></div>



<div class="container">	<div class="row">        <div class="form-group">            <label class="control-label col-md-1" for="Receiver">收件人</label>            <div class="col-md-10">                <input class="form-control" data-val="true" data-val-length="4到20个字符" data-val-length-max="20" data-val-length-min="4" data-val-required="必填" id="Receiver" name="Receiver" type="text" />                <span class="field-validation-valid text-danger" data-valmsg-for="Receiver" data-valmsg-replace="true"></span>            </div>        </div>	</div></div>


コンテナと行を追加しても効果はありません
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。