.net - Bootstrap：在 2500px 宽的浏览器窗口中使用 container-fluid 时，col-lg 确定 col-xl 的宽度

Question

我使用 Bootstrap 4.5容器流体，我似乎无法使col-xl 格式化工作。

我有一个带有搜索条件的表单，如下所示：

<div class="row">
<div class="col-sm-12 col-md-3 col-lg-5 col-xl-2">
    <div class="form-group">
        <input type="text" id="changesSearchFilter" class="form-control" placeholder="Key search">
    </div>
</div>

<div class="col-sm-12 col-md-3 col-lg-2 col-xl-1">
    <div class="form-group">
        <div class='input-group date from-date'>
            <input type='text' id='changesFromDate' class='form-control' placeholder='From-date' />
            <span class='input-group-addon'>
                <span class='glyphicon glyphicon-calendar'></span>
            </span>
        </div>
    </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 col-xl-1">
    <div class="form-group">
        <div class='input-group date to-date'>
            <input type='text' id='changesToDate' class='form-control' placeholder='To-date' />
            <span class='input-group-addon'>
                <span class='glyphicon glyphicon-calendar'></span>
            </span>
        </div>

    </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 col-xl-8">
    <div class="form-group">
        <button type="submit" hidden id="hiddenSubmitButton">submit</button>
        <div class="btn-group">

            <button type="button" id="submitChangesSearch" class="btn btn-primary">Search</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" class="changesTableLink">All</a></li>
                (razor code removed)
            </ul>
        </div>
    </div>
</div>

当我在 2400px 的浏览器窗口中使用它时，我希望col-xl 格式化被激活，但col-lg 无论我做什么，它都会产生影响（从而使输入之间的间距在大屏幕上变宽）。

我一直在浏览 SO 寻找答案。我试图将col-xx 最大分辨率的顺序更改为最小分辨率，并且我也尝试了这些col-xx-auto 功能但没有任何成功。

完整的 (Razor) html 如下所示（不包括母版页/布局）：

<div id="main" class="container-fluid">
<div id="tabList">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a href="#tabAllChanges" data-toggle="tab" role="tab">All changes</a></li>
        <li role="presentation"><a href="#tabEmployees" data-toggle="tab" role="tab">Employees</a></li>
    </ul>
    <div class="panel-body nav-tab-body">
        <div class="tab-content">
            <div class="tab-pane fade in active" id="tabAllChanges">

                <form id="changesForm" method="POST">
                    <div class="row">
                        <div class="col-sm-12 col-md-3 col-lg-5 col-xl-2">
                            <div class="form-group">
                                <input type="text" id="changesSearchFilter" class="form-control" placeholder="Key search">
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-3 col-lg-2 col-xl-1">
                            <div class="form-group">
                                <div class='input-group date from-date'>
                                    <input type='text' id='changesFromDate' class='form-control' placeholder='From-date' />
                                    <span class='input-group-addon'>
                                        <span class='glyphicon glyphicon-calendar'></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-2 col-xl-1">
                            <div class="form-group">
                                <div class='input-group date to-date'>
                                    <input type='text' id='changesToDate' class='form-control' placeholder='To-date' />
                                    <span class='input-group-addon'>
                                        <span class='glyphicon glyphicon-calendar'></span>
                                    </span>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-12 col-md-3 col-lg-2 col-xl-8">
                            <div class="form-group">
                                <button type="submit" hidden id="hiddenSubmitButton">submit</button>
                                <div class="btn-group">

                                    <button type="button" id="submitChangesSearch" class="btn btn-primary">Search</button>
                                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <span class="caret"></span>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" class="changesTableLink">All</a></li>
                                        <li role="separator" class="divider"></li>
                                        @foreach (string tableName in EnumHelper.TableNames)
                                        {
                                            <li><a href="#" data-table="@tableName" class="changesTableLink">@tableName</a></li>

                                        }
                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>
                </form>
                <div class="row">

                    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <table id="changesTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>Table</th>
                                    <th>Key</th>
                                    <th>Action</th>
                                    <th>Timestamp</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标签： .netasp.net-corerazorbootstrap-4

Answer 1

可以参考这个，可以看到最大容器宽度和断点。搜索按钮的宽度是用它的高度来引用的，所以它不会填满整个div。我在withcol-xx中添加了背景颜色， 我发现它在我的视图中有效：divcol-xx

看法：

<div id="main" class="container-fluid">
    <div id="tabList">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="#tabAllChanges" data-toggle="tab" role="tab">All changes</a></li>
            <li role="presentation"><a href="#tabEmployees" data-toggle="tab" role="tab">Employees</a></li>
        </ul>
        <div class="panel-body nav-tab-body">
            <div class="tab-content">
                <div class="tab-pane fade in active" id="tabAllChanges">

                    <form id="changesForm" method="POST">
                        <div class="row">
                            <div class="col-sm-12 col-md-3 col-lg-5 col-xl-2" style="background-color:red">
                                <div class="form-group">
                                    <input type="text" id="changesSearchFilter" class="form-control" placeholder="Key search">
                                </div>
                            </div>

                            <div class="col-sm-12 col-md-3 col-lg-2 col-xl-1" style="background-color:blue">
                                <div class="form-group">
                                    <div class='input-group date from-date'>
                                        <input type='text' id='changesFromDate' class='form-control' placeholder='From-date' />
                                        <span class='input-group-addon'>
                                            <span class='glyphicon glyphicon-calendar'></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-3 col-lg-2 col-xl-1" style="background-color:black">
                                <div class="form-group">
                                    <div class='input-group date to-date'>
                                        <input type='text' id='changesToDate' class='form-control' placeholder='To-date' />
                                        <span class='input-group-addon'>
                                            <span class='glyphicon glyphicon-calendar'></span>
                                        </span>
                                    </div>

                                </div>
                            </div>
                            <div class="col-sm-12 col-md-3 col-lg-2 col-xl-8" style="background-color:green">
                                <div class="form-group">
                                    <button type="submit" hidden id="hiddenSubmitButton">submit</button>
                                    <div class="btn-group">

                                        <button type="button" id="submitChangesSearch" class="btn btn-primary">Search</button>
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="changesTableLink">All</a></li>
                                            <li role="separator" class="divider"></li>
                                            
                                        </ul>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </form>
                    <div class="row">

                        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            <table id="changesTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>Table</th>
                                        <th>Key</th>
                                        <th>Action</th>
                                        <th>Timestamp</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

结果：

工作顺序是 col-xl=>con-lg=>col-md=>col-sm