So legen Sie eine Dropdown-Gruppe auf einer Bootstrap-Seite fest, um dieselbe Breite zu verwenden

Question

Ich habe eine Seite auf einer ASP.NET-Site, die Bootstrap (v3.3.6) verwendet. Ich verwende die Razor-Syntax, um eine Dropdown-Auswahleingabe auf der Seite zu platzieren. Das Problem, das ich habe, ist, dass die Breite der Felder durch die Länge der darin enthaltenen Optionen festgelegt wird. Ich möchte stattdessen alle diese Dropdowns die gleiche Breite haben. Ich verstehe, dass ich in der Lage sein kann, eine bestimmte oder minimale/maximale Breite in CSS anzugeben, um das Problem zu lösen, aber habe ich mich gefragt, ob es eine Kombination der Bootstrap-Klassen gibt, die dies dynamischer erreichen könnten?

<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

Dank @ GL.awog für mich in die richtige Richtung mit diesem Hinweis bemerkte ich, dass das Problem, das ich von mir die new { @class = "form-control input-sm" } mit new { htmlAttributes = ... Einwickeln dämmt hatte. Dies war im @Html.DropDownListFor(...) Razor-Codeblock. Dies führte dazu, dass die Bootstrap-Klassen nicht interpretiert wurden und die Auswahl nicht in der erwarteten Weise angezeigt wurde.

Die Verwendung von Htmlattributes ermöglicht es uns, hier in weiteren Einzelheiten Attribut auf der HTML als Abkürzung zum Erstellen Editor Vorlagen und erklärte angeben: http://cpratt.co/html-editorfor-and-htmlattributes/