MVC 5 @ Html.EditorFor widthを変更するには

Question

MVC 5 Razorを使用して編集フォームをデザインしています。私は入力コントロールが図のように全体の空白の幅を埋めるようにしたいが、うまくいきません。ここのイメージを参照してください。 Page here

私はコントロールをテーブルの寸法に入れました。 1つのディメンションはラベル用で、もう1つのディメンションは入力エディタ（HTMLヘルパ）用です。

私は、次のCSSクラスとフォームコントロールの幅を上書きしようとしたが、成功しません：

.form-control { 
    width: 100%!important; 
    } 

もが別のCSSクラス

.newinputwidth { 
    width: 400px!important; 
    } 

をしたが、それは幅を変更しません。入力の。

完全なMVCコードはこちらです。

@model test2.Models.CaseReport 

<style> 
.form-control { 
    width: 100%!important; 
} 
.newinputwidth { 
    width: 400px!important; 
} 
</style> 
<h2>Edit</h2> 
<div class="container"> 
@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-xs-12"> 
      <table id="dt" class="table table-condensed table-responsive table-bordered" width="100%" cellspacing="0"> 
       <tr> 
        <td>Main Id</td> 
        <td> 
         @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "newinputwidth" } }) 
        </td> 
       </tr> 
       <tr> 
        <td>Location</td> 
        <td> 
         @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } }) 
        </td> 
       </tr> 
       <tr> 
        <td>Disease </td> 
        <td> 
         @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } }) 
        </td> 
       </tr> 
      </table> 
     </div> 
     <div class="row col-lg-12 col-md-12 col-xs-12 text-center"> 
      <div> 
       <div> 
        @Html.Action("_DetailsIndex", new { id = Model.CaseReportId }) 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Save" class="btn btn-default" /> 
      </div> 
     </div> 
     <div> 
      @Html.ActionLink("Back to List", "Index") 
     </div> 

    </div> 
} 
</div> 

Answer 1

ブートストラップを使用しているので、このタイプのレイアウトではテーブルを完全に放棄することをおすすめします。

あなたは水平方向のフォームを使用してグリッドシステムでこれを達成することができるはずです。 http://getbootstrap.com/css/#forms-horizontal

<div class="row form-horizontal"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.CaseReportId, htmlAttributes: new { @class = "control-label col-md-3" }) 
      <div class="col-md-9"> 
       @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "form-control" } }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-3" }) 
      <div class="col-md-9"> 
       @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.ReportDate, htmlAttributes: new { @class = "control-label col-md-3" }) 
      <div class="col-md-9"> 
       @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } }) 
      </div> 
     </div> 
    </div> 
</div> 

あなたが本当にテーブルを使用したい場合は、私はあなたが上テーブル応答クラスを持って気づきましたテーブル要素これは、親（ラッパー）divで使用するためのものです。 http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive"> 
    <table class="table"> 
    ... 
    </table> 
</div> 

Answer 2

は、ブートストラップでは、コンテナクラスで、ブランクコントロールを配置し、その上にカスタムCSSを適用します。それは空白のコントロールの幅を処理します。コンテナクラスの幅を設定しても、それが反応したり、コントロールの幅が非常に短くなったりすることはありません。ユーザーが読むことができる応答性の高い動作を実現するには、各コントロールのCSSを設定し、@ style = "100％！important; min-width：300px;"を適用します。 ここに例を示します。

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" })) 
{ <div class="container" style="width:40%; margin:6%"> 
     <h4 style="color:darkorange">Register</h4> 
     <div class="row text-center"> 
      <h5 style="color:tomato">@ViewBag.Message</h5> 
     </div> 
     @Html.AntiForgeryToken() 
     <div class="form-horizontal"> 
      @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
      <div class="form-group"> 
       @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @placeholder = "First Name", @style = "width:100% !important; min-width:180px;" } }) 
        @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
    </div> 
    </div> 
    }