css - Bootstrap 容器类部分响应

Question

我正在编写一个使用 Bootstrap 的 asp.net 应用程序。我遇到了容器类的问题。我想要做的是有一个由 3 个标签和 3 个下拉列表组成的网格。这是相关代码:

        <div class="panel panel-default">
            <div class="panel-body container">
                <div class="cssFilterGrid">
                    <div class="row">
                        <div class="col-sm-4">
                            <asp:Label ID="label 1" runat="server" Text="label 1" /></div>
                        <div class="col-sm-4">
                            <asp:Label ID="label 2" runat="server" Text="label 2" /></div>
                        <div class="col-sm-4">
                            <asp:Label ID="label 3" runat="server" Text="label 3" /></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <asp:DropDownList ID="ddl1" CssClass="form-control" DataTextField="ddl1" runat="server" /></div>
                        <div class="col-sm-4">
                            <asp:DropDownList ID="ddl2" CssClass="form-control" DataTextField="StatusString" DataValueField="ddl2" runat="server" /></div>
                        <div class="col-sm-4">
                            <asp:DropDownList ID="ddl3" CssClass="form-control" DataTextField="FullName" DataValueField="ddl3" runat="server" /></div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 filterBtn">
                            <asp:Button ID="btnFilter" CssClass="btn btn-primary" runat="server" Text="Filter" OnClick="btnFilter_Click" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

cssFilterGrid 如下:

.cssFilterGrid
{
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

有了面板主体 div 上的容器类，网格在 90% 的时间内都是响应式的。但是，在某些分辨率下，下拉菜单 #3 会离开屏幕。如果我删除容器类，网格会在 100% 的时间内响应。知道会发生什么吗？

Answer 1

您是否尝试过使用 container-fluid 而不是 container...

容器在bootstrap中对于每个屏幕尺寸都有一个固定的宽度(xs,sm,md,lg)； .container-fluid 扩展以填充可用宽度。即，根据正在查看网页的视口(viewport)的宽度，容器类为其 div 提供特定的固定宽度。