同じ幅を使用するようにブートストラップページのドロップダウングループを設定する方法

Question

ブートストラップ（v3.3.6）を使用するASP.NETサイトにページがあります。私はページにドロップダウン選択入力を配置するためにRazor構文を使用していますが、問題は、ボックスの幅がオプションの長さで設定されているようです。私は代わりにこれらのすべてのドロップダウンを同じ幅にしたいと思います。私は、これを解決するためにCSSの特定の幅または最小/最大幅を指定できるかもしれないと理解していますが、より動的な方法でこれを達成できるBootstrapクラスの組み合わせがあるのだろうかと疑問に思っていましたか？これで正しい方向に私を指しているため、@ GL.awogへ

<div class="container-fluid"> 
     <div class="form-group"> 
      <div class="col-lg-6 col-md-6 col-sm-12"> 
       @Html.LabelFor(model => model.AssigneeTeam, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" }) 
       <div class="col-md-6 col-md-offset-1 col-sm-12"> 
        @Html.DropDownListFor(model => model.AssigneeTeam, 
    EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.AssigneeTeams)), 
new { htmlAttributes = new { @class = "form-control input-sm" } }) 
        @Html.ValidationMessageFor(model => model.AssigneeTeam, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-12"> 
       @Html.LabelFor(model => model.Priority, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" }) 
       <div class="col-md-6 col-md-offset-1 col-sm-12"> 
        @Html.DropDownListFor(model => model.Level, 
    EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.PriorityLevels)), 
new { htmlAttributes = new { @class = "form-control input-sm" } }) 
        @Html.ValidationMessageFor(model => model.Priority, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-12"> 
       @Html.LabelFor(model => model.AffectedComponent, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" }) 
       <div class="col-md-6 col-md-offset-1 col-sm-12"> 
        @Html.DropDownListFor(model => model.AffectedComponent,   EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.EstateComponents)), new { htmlAttributes = new { @class = "form-control input-sm" } }) 
        @Html.ValidationMessageFor(model => model.AffectedComponent, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="col-lg-6 col-md-6 col-sm-12"> 
       @Html.LabelFor(model => model.Type, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" }) 
       <div class="col-md-6 col-md-offset-1 col-sm-12"> 
        @Html.DropDownListFor(model => model.Type, 
    EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.ChangeType)),new { htmlAttributes = new { @class = "form-control input-sm" } }) 
        @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

This is a screenshot of the result, as you can see the dropdowns vary in width

Answer 1

おかげで私は私が私から生じていた問題がnew { htmlAttributes = ...とnew { @class = "form-control input-sm" }を包むことに気づきました。これは、@Html.DropDownListFor(...)剃刀コードブロックにありました。これは、Bootstrapクラスが解釈されていないことを意味していたため、選択が予期した方法で表示されませんでした。

htmlattributesの使用量は、エディタのテンプレートを作成するためのショートカットとして、HTMLの属性を指定することを可能にし、ここでさらに詳細に説明されている：http://cpratt.co/html-editorfor-and-htmlattributes/