Question

我正在使用VB.Net MVC，Razor，Boostrap和Visual Studio 2013.我的客户希望下拉的宽度与文本框的宽度相同。

我的下拉是这样创建的：

@<div class="row">
    <div class="col-md-4">
        <label>@Model.ListOfFields(i): </label>
    </div>
    <div class="col-md-8">
        <div class="btn-group">
                <button class="btn btn-default dropdown-toggle btn-sm" type="button" 
                              id="@Model.ListOfFields(i)" data-toggle="dropdown" 
                              aria-expanded="true">

                     <span class="search" id="@Model.ListOfCategoryAttributeIDs(i)" ></span>
                     <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labeledby="@Model.ListOfFields(i)">

                    @For x As Integer = 0 To Model.ListOfDropDowns.Count - 1
                    Dim currentField As String = Model.ListOfFields(i)
                    Dim currentObject As CivilServiceInventoryMock.ViewModels.customDropDown = Model.ListOfDropDowns(x)

                    If (currentObject.fieldType).Equals(currentField) Then

                        Dim currentOption As String = currentObject.dropDownValue

                            @<li role="presentation">
                                <a id="ddListSelectItemType" class="ddListSelectItemType"
                                      onclick="lockValue(this)" role="menuitem" 
                                      tabindex="-1">
                                   <div class="itemOptions" id="@Model.ListOfCategoryAttributeIDs(i)">
                                       @Html.DisplayFor(Function(modelItem) currentOption)
                                   </div>
                                 </a>
                             </li>
                         End If
                         Next
                     </ul>
                </div>
           </div>
      </div>

我的文本框是这样创建的：

    @For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
        If Model.ListOfDisplayTypes(i).Equals("TextBox") Then
        @<div class="row">
            <div class="col-md-4">
                <b>@Model.ListOfFields(i): </b>
            </div>
            <div class="col-md-4">
                <input class="search" id="@Model.ListOfCategoryAttributeIDs(i)" 
                      name="@Model.ListOfFields(i)" type="text" placeholder="@Model.ListOfFields(i)" />
            </div>
        </div>
        End If
    Next

我添加并使用以下css，但我没有找到正确的组合使下拉和文本框的宽度相同：

.btn-group {
    width:90%;
}
.btn-group .btn {
    width:90%;
    }
.btn-group .btn.dropdown-toggle {
    width:100%;
    }
.dropdown-menu {
    width:100%;
}

我是否应该使用列大小和宽度百分比的某种组合来使我的下拉和文本框具有相同的宽度？

Answer 1

检查Boostrap文档：http://getbootstrap.com/css/#forms

在表单部分，您可以将表单设置为class =＆＃34; form-inline＆＃34; （它可以应用于对输入所在的内容进行分组的div，不需要表单）。

在父容器组中添加了form-inline之后，输入和的大小应该相同

@For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
    If Model.ListOfDisplayTypes(i).Equals("TextBox") Then
    @<div class="row">
        <div class="form-group col-md-4">
            <b>@Model.ListOfFields(i): </b>
        </div>
        <div class="form-group col-md-4">
            <input class="search" id="@Model.ListOfCategoryAttributeIDs(i)" 
                  name="@Model.ListOfFields(i)" type="text" placeholder="@Model.ListOfFields(i)" />
        </div>
    </div>
    End If
Next

如何使用bootstrap使下拉和文本框具有相同的宽度

1 个答案: