引导容器类部分响应

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;
}

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

Answer 1

您是否尝试过切换到 container-fluid 而不是 container...

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