我们可以修复Dropbox的大小吗？

Question

在我的应用程序的一个网页上。我注意到当我从17“屏幕移动到15”时，保管箱的大小会发生变化。我的问题是我们可以修改Dropbox的大小，这样当我从17“屏幕移动到15”时它不应该改变吗？

17“屏幕

15“屏幕

我只担心Dropbox的大小。请在这里帮忙。

以下是代码中的div：

<div class="col-md-3 hidebtnmobile">
     <div class="col-md-7" style="width: 46%">
         @Html.DropDownList("ChangeStatus", Model.GetAllStatus().OrderBy(l => l.Text), "-- Multi Status Change --")
     </div>
     <div class="col-md-5" style="padding-left: 0;">
        <button class="btn large primary-bg " style="margin-right: 5px; font-size: 12px;" title="Status Change" onclick=" ChangeMultiStatus(); return false;">Multi-Status</button>
     </div>
</div

＆GT;

Answer 1

这是由于当显示器的分辨率改变时列大小改变。您可以为下拉列表指定一个类，然后将最小宽度应用于下拉列表。

视图：

@Html.DropdownList("ChangeStatus", Model.GetAllStatus().OrderBy(l => l.Text), "-- Multi Status Change --", new { @class = "ddl-fixed" })

的CSS：

.ddl-fixed {
    min-width: ##px;
}

Answer 2

您已将DropDownList的style属性设置为百分比。

<div class="col-md-7" style="width: 46%">
     @Html.DropDownList("ChangeStatus", Model.GetAllStatus().OrderBy(l => l.Text), "-- Multi Status Change --")
 </div>

百分比宽度通常会导致DropDownList随屏幕大小而变化。将DropDownList样式更改为恒定宽度测量（例如像素（px））应该可以防止“Dropbox”在不同屏幕上更改大小。请参阅以下代码以了解更改。 “50”可以是你喜欢的任何数字。

<div class="col-md-7" style="width: 50px">
     @Html.DropDownList("ChangeStatus", Model.GetAllStatus().OrderBy(l => l.Text), "-- Multi Status Change --")
 </div>

Answer 3

是的，通过这种方式你可以修复尺寸：

<div class="col-md-6" style="width: 180px;">
                    @Html.DropDownList("ChangeStatus", Model.GetAllStatus().OrderBy(l => l.Text), "-- Multi Status Change --")
                </div>
                <div class="col-md-6" style="padding-left: 0;">
                    <button class="btn large primary-bg " style="margin-right: 5px; font-size: 12px;" title="Status Change" onclick=" ChangeMultiStatus(); return false;">Multi-Status</button>
                </div>