Bootstrap: col-lg определяет ширину над col-xl при использовании container-fluid в окне браузера шириной 2500 пикселей

Question

Я использую Bootstrap 4.5 container-fluid , и я не могу заставить работать 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>

Когда я использую его в окне браузера с разрешением 2400 пикселей Я ожидаю, что будет активировано форматирование col-xl, но это форматирование col-lg, которое действует независимо от того, что я делаю (таким образом расстояние между входами на большом экране).

Я просматривал SO в поисках ответов. Я попытался изменить порядок col-xx с наибольшего разрешения на наименьшее, и я также безуспешно пробовал функции col-xx-auto.

Полный (Razor) html выглядит так (masterpage / макет не включен):

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

Answer 1

Вы можете ссылаться на this , вы можете видеть максимальную ширину контейнера и точку останова. Ширина кнопки поиска связана с ее высотой, поэтому она не заполнит весь div col-xx . Я добавил цвет фона в div с помощью col-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

введите описание изображения здесь