如何在bootstrap中修复selected-select样式的布局问题?

时间:2017-06-24 15:07:10

标签: asp.net-mvc twitter-bootstrap css3 jquery-chosen

我正在尝试使用bootstrap css来应用样式,但每次我都没有成功。

我想做的是:

    <link href="~/Theme/css/chosen.css" rel="stylesheet" />
<link href="~/Theme/Bootstrap37/css/chosen-bootstrap.css" rel="stylesheet" />

     <section id="contact-page" class="EditMode" style="display:none;">
        <div class="container">
            <div class="row ">
                <div class="status alert alert-success" style="display: none"></div>
                <div class="col-md-12 col-xs-12">
                    <h5>&nbsp;&nbsp;Change your information</h5>
                    <form id="" class="" name="c_signup" method="post" action='@Url.Action("CSignUp","Profile", new { area="CPortal"})'
                          enctype="multipart/form-data" onSubmit="return validation(this)">

<div class="col-xs-6">
                        <div class="form-group">

  <label>Speciality</label>                         
                            <div >
                                    @Html.HiddenFor(m => m.SelectedSpecialityTest)
                                    @Html.ListBoxFor(m => m.SelectedSpecialityIds,
                                    new MultiSelectList(Model.Specialities, "OID", "SpecialityDesc"),
                                    new { @class = "chosen-select form-control", @required = "required" })
                            </div>
                        </div>
                    </div>
</form>
</div>
</div>
</div>
</section>






   jQuery(document).ready(function () {

        $(".chosen-select").chosen({ no_results_text: "Oops, nothing found!" });
});

现在,当我看到视图然后选择 - 选择下拉列表时,不会只显示一条小线。

在此处查看完整的工作原理:

https://codepen.io/maifs/pen/VWMwWw

0 个答案:

没有答案