私はMVC4を使用していますが、これは新しいBootstrap 3バージョンを使用している人にとっては問題です。フォームコントロールはデフォルトでwidth:100%になっているので、検証メッセージを置くためのベストプラクティスは何ですか?Twitter Bootstrap 3を使用して検証メッセージを送信するためのベストプラクティスとは何ですか?
バージョン2.xでは、メッセージがコントロールの右側に配置されていることを確認するために、入力コントロールの直後にヘルプインラインスパンに検証メッセージを配置することをお勧めします。
しかし、バージョン3では、検証メッセージが制御下に強制されるため、すべてのコントロールが下にシフトします。
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
私は手動で(下記)は、このような新しい列にそれらを設定することが、より受け入れられる方法またはこれに対処するより少ない手動の方法があったか疑問に考えられてきました。
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
巧妙なトリック!私は検証メッセージを格納するために3番目の "col-lg- *" divを追加するだけで済んだと思うが、将来あなたのメソッドを使うかもしれない。 – RichC