Bootstrap-Breite im Formular auswählen

Ich verwende Bootstrap v4 und bootstrap-select js/css (in ASP.NET MVC-Projekt) und ich habe ein Problem in meinem form. Die select mit multiple Optionen von bootstrap-select ist breiter als der Rest meiner inputs, obwohl es in einem div mit class="form-control" ist. Die Ausgabe sieht etwa so aus: Bootstrap-Breite im Formular auswählen

Wie Sie sehen können, Expertise dropdown ist viel größer als der Rest des inputs. Ich habe versucht, bootstrap-select.css zu bearbeiten und width:auto ändern, aber hat nicht funktioniert. Gibt es etwas, was ich tun kann, um die width meiner anderen inputs übereinstimmen?

Mein Code sieht so etwas wie dieses

<div class="form-group"> 
    @Html.LabelFor(v => v.BirthDate) 
    @Html.TextBoxFor(v => v.BirthDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" }) 
    @Html.ValidationMessageFor(v => v.BirthDate) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(v => v.ResidenceCountry) 
    @Html.TextBoxFor(v => v.ResidenceCountry, new { @class = "form-control" }) 
    @Html.ValidationMessageFor(v => v.ResidenceCountry) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(m => m.CurrencyId) 
    @Html.DropDownListFor(m => m.CurrencyId, new SelectList(Model.Currencies, "Id", "Name"), "", new { @class = "form-control" }) 
    @Html.ValidationMessageFor(m => m.CurrencyId) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(m => m.FieldOfExpertiseIds) 
    @Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" }) 
    @Html.ValidationMessageFor(m => m.FieldOfExpertiseIds) 
</div>

uptade:

ich jetzt die Form-Gruppe zu so etwas wie dies geändert (hinzugefügt @data_width = "auto"):

<div class="form-group"> 
    @Html.LabelFor(m => m.FieldOfExpertiseIds) 
    <br /> 
    @Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" , @data_width="auto" }) 
    @Html.ValidationMessageFor(m => m.FieldOfExpertiseIds) 
</div>

Und jetzt es sieht ein bisschen besser aus, aber immer noch ein Problem:

Quelle

2017-09-20 Robert

Nicht vertraut mit "selectpicker". Kommt das von einer Drittanbieter-Bibliothek? –

Ja, https://silviomoreto.github.io/bootstrap-select/ – Robert

Ich konnte es zum Laufen bringen, nachdem ich einige externe Abhängigkeiten geklärt hatte. Eine Sache, auf die Sie achten sollten, sind die erforderlichen Versionen. JQuery 1.8.0+ und Bootstrap Version 4 funktionierte nicht für mich. Ich konnte es mit 3.3.6 zum Laufen bringen.

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script data-require="[email protected]" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" /> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 
    <!-- (Optional) Latest compiled and minified JavaScript translation files --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script> 
    </head> 

    <body class="container"> 

     <div class="form-group"> 
     <label for="test0">test</label> 
     <input id="test0" class="form-control" type="text" /> 
     </div> 
     <div class="form-group"> 
     <label for="test1">drop down</label> 
     <select id="test1" class="form-control" type="text"> 
      <option>One</option> 
      <option>Two</option> 
      <option>Three</option> 
      </select> 
     </div> 
     <div class="form-group"> 
     <label >test 1</label> 
     <select id="test2" class="selectpicker form-control" multiple> 
      <option>Mustard</option> 
      <option>Ketchup</option> 
      <option>Relish</option> 
     </select> 
     </div> 
    </body> 

</html>

Schauen Sie sich die Plunker example

Quelle

2017-09-20 07:23:49

Sie versuchen, besser data-width

data-width Attribut mit der Breite der Auswahl einzustellen. Stellen Sie data-width auf auto auf ein, passen Sie die Breite der Auswahl automatisch an ihre breiteste Option an. fitpasst die Breite der Auswahl automatisch an die Breite der aktuell ausgewählten Option an. Eine genaue Wert kann auch angegeben werden, zB 300px oder 50%.

Also werde ich Sie so etwas wie dieses

<select class="selectpicker" data-width="100%"> 
    ... 
</select>

Also in Ihrem Fall eine bessere Nutzung verwenden vorschlagen - @data_width = "100%" und wenn ihr weiter verändern die Breite als pro Ihre Notwendigkeit zB 75% oder 50%.

Source link

ich hoffe th Es war hilfreich für dich.

Quelle

2017-09-20 07:00:56 weBBer

Bootstrap-Breite im Formular auswählen

Antwort

Verwandte Themen