【发布时间】：2020-11-02 14:57:15
【问题描述】：
我使用 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 如下所示（不包括母版页/布局）：
<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>
【问题讨论】：
标签： .net asp.net-core razor bootstrap-4