css - 具有静态宽度的 Bootstrap 表单内联 DropDownLists

Question

我有 3 个 DropDownLists，标签彼此内联。我正在尝试将所有 DropDown 的宽度设为静态 200px。取而代之的是 bootstrap 覆盖并使下拉菜单始终动态地成为内部最宽元素的宽度。

<div class="form-inline">
    <div class="form-group">
        <asp:Label ID="lblDropDownList1" runat="server" Text="DDL 1 Label:" AssociatedControlID="ddlDropDownList1"></asp:Label>
        <telerik:RadDropDownList ID="ddlDropDownList1" runat="server" Width="200px" CssClass="form-control"></telerik:RadDropDownList>
    </div>

    <asp:Panel ID="pnlDropDownList2" runat="server" CssClass="form-group" Visible="false">
        <asp:Label ID="lblDropDownList2" runat="server" Text="DDL 2 Label:" AssociatedControlID="ddlDropDownList2"></asp:Label>
        <telerik:RadDropDownList ID="ddlDropDownList2" runat="server" Width="200px" CssClass="form-control"></telerik:RadDropDownList>
    </asp:Panel>

    <asp:Panel ID="pnlDropDownList3" runat="server" CssClass="form-group" Visible="false">
        <asp:Label ID="lblDropDownList3" runat="server" Text="DDL 3 Label:" AssociatedControlID="ddlDropDownList3"></asp:Label>
        <telerik:RadDropDownList ID="ddlDropDownList3" Width="200px" CssClass="form-control"></telerik:RadDropDownList>
    </asp:Panel>
</div>

Answer 1

制作一个设置宽度的容器DIV。然后将下拉的宽度设置为小于该宽度，并且不应超过该尺寸。