0

そのページで使用されている「Static Control」ラベルと同じラベルを使用したい。ただし、同じ Bootstrap バージョンを使用していますが、フォーム コントロールをそのように配置することはできません (ラベルを右フロートにし、データ フィールドを左フロートにして並べて配置し、それらの間に「:」記号が必要です。ただし、結果は下の画像のとおりです.私のコードを見て、何が間違っているのか教えていただけますか?

そのページのコード:

<div class="form-group">
    <label class="col-md-3 control-label">Static Control</label>
    <div class="col-md-9">
        <p class="form-control-static"> email@example.com </p>
    </div>
</div>

Razor ページで使用するコード:

<div class="form-group">
     @Html.LabelFor(m => m.Name, new { @class = "col-md-3 control-label" }):
     <div class="col-md-9">
         @Html.DisplayFor(m => m.Name, new { @class = "form-control-static" })
     </div>
</div>
<br />
<div class="form-group">
     @Html.LabelFor(m => m.Surname, new { @class = "col-md-3 control-label" }):
     <div class="col-md-9">
         @Html.DisplayFor(m => m.Surname, new { @class = "form-control-static" })
     </div>
</div>

ここに画像の説明を入力

4

2 に答える 2

0

100% の幅にコロンを加えたものに等しい 2 つの要素があるため、値が 1 行下に押し出されます。HtmlHelper を使用してコロンを追加する代わりに、ラベルをコーディングするだけで済みます。これを次のように変更します。

<div class="form-group">
   <label class="col-md-3 control-label">@Model.Name:</label>
   <div class="col-md-9">
     @Html.DisplayFor(m => m.Name, new { @class = "form-control-static" })
   </div>
</div>
于 2016-09-07T22:52:11.520 に答える