在 Bootstrap 4 中看不到文本的响应式表格压缩表单字段
Posted
技术标签:
【中文标题】在 Bootstrap 4 中看不到文本的响应式表格压缩表单字段【英文标题】：Responsive table condensing form fields where text cant be seen in Bootstrap 4 【发布时间】：2021-01-26 05:30:23 【问题描述】：解决当表格适合屏幕时选择表单字段值时无法看到的问题的最佳方法是什么。我希望表格至少可以滚动，并让表单字段实际上是可见的。具体来说，您可以在投球局中看到这一点。
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<form style="width:400px" data-bind="submit: members.pitchingLogs.saveLog.bind($data, '/scores/pitchinglogs/save')">
<div class="row">
<div class="col-12 col-lg-6" data-bind="if: members.pitchingLogs.stats(), css: hidden: !members.pitchingLogs.stats() ">
<div class="table-responsive">
<table class="table table-bordered table-striped w-100">
<thead>
<tr>
<th colspan="5" class="text-center" data-bind="text: members.pitchingLogs.stats().AwayTeam.Name">Texas Oilers 11u - Hamblin/Hancock</th>
</tr>
</thead>
<thead class="" data-bind="css: hidden: members.pitchingLogs.stats().AwayTeam.Pitchers().length == 0 ">
<tr>
<th>Pitcher Name</th>
<th class="text-center">Pitch Count</th>
<th class="text-center" colspan="2">Innings Pitched</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: members.pitchingLogs.stats().AwayTeam.Pitchers">
<tr>
<td>
<select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().AwayTeam.AvailablePlayers, event: change: $root.members.pitchingLogs.saveUpdate "><option value="">- Pitcher -</option><option value="1283377">Blair, Beau (0)</option><option value="1283378">Caves, Beckham (0)</option><option value="1283379">Flowers, Kade (0)</option><option value="1283380">Garrison, Gavin (0)</option><option value="1283381">Guerrero, Saul (0)</option><option value="1283382">Hernandez, Jovani (0)</option><option value="1283383">Lewis, Jhett (0)</option><option value="1283384">Pruitt, Colton (0)</option><option value="1283385">Ruggiano, ***s (0)</option><option value="1283386">Smith, Greer (0)</option></select>
</td>
<td>
<select class="w-100" data-bind="value: $data.PitchCount">
<option></option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitched, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="1/3">1/3</option>
<option value="2/3">2/3</option>
</select>
</td>
<td class="table-col-sm-center">
<button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, false)"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().AwayTeam.AvailablePlayers, event: change: $root.members.pitchingLogs.saveUpdate "><option value="">- Pitcher -</option><option value="1283377">Blair, Beau (0)</option><option value="1283378">Caves, Beckham (0)</option><option value="1283379">Flowers, Kade (0)</option><option value="1283380">Garrison, Gavin (0)</option><option value="1283381">Guerrero, Saul (0)</option><option value="1283382">Hernandez, Jovani (0)</option><option value="1283383">Lewis, Jhett (0)</option><option value="1283384">Pruitt, Colton (0)</option><option value="1283385">Ruggiano, ***s (0)</option><option value="1283386">Smith, Greer (0)</option></select>
</td>
<td>
<select class="w-100" data-bind="value: $data.PitchCount">
<option></option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitched, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="1/3">1/3</option>
<option value="2/3">2/3</option>
</select>
</td>
<td class="table-col-sm-center">
<button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, false)"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
<tbody data-bind="if: members.pitchingLogs.stats().AwayTeam.AvailablePlayers().length == 0"></tbody>
<tfoot data-bind="if: members.pitchingLogs.stats().AwayTeam.AvailablePlayers().length > 0">
<tr>
<td colspan="5" class="text-center">
<button class="btn btn-primary" data-bind="click: members.pitchingLogs.addLog.bind($data, false)"><i class="fa fa-plus"></i> Pitcher</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="col-12 col-lg-6 mt-4 mt-lg-0" data-bind="if: members.pitchingLogs.stats(), css: hidden: !members.pitchingLogs.stats() ">
<div class="table-responsive">
<table class="table table-bordered table-striped w-100">
<thead>
<tr>
<th colspan="5" class="text-center" data-bind="text: members.pitchingLogs.stats().HomeTeam.Name">TCR Bobcats - Wise</th>
</tr>
</thead>
<thead class="" data-bind="css: hidden: members.pitchingLogs.stats().HomeTeam.Pitchers().length == 0 ">
<tr>
<th>Pitcher Name</th>
<th class="text-center">Pitch Count</th>
<th class="text-center" colspan="2">Innings Pitched</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: members.pitchingLogs.stats().HomeTeam.Pitchers">
<tr>
<td>
<select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().HomeTeam.AvailablePlayers, event: change: $root.members.pitchingLogs.saveUpdate "><option value="">- Pitcher -</option><option value="1282403">Challender, Brodie (29)</option><option value="1282404">Dakin, Caleb (13)</option><option value="1282405">Fox, Brayden (11)</option><option value="1282406">Gardner, Trevor (12)</option><option value="1282407">Geraci, Brennen (2)</option><option value="1282408">Hull, Brody (99)</option><option value="1282409">Hunt, Wyatt (6)</option><option value="1282410">Jolley, Makay (34)</option><option value="1282411">Titsworth, Beau (4)</option><option value="1282412">Wise, Colton (9)</option></select>
</td>
<td>
<select class="w-100" data-bind="value: $data.PitchCount">
<option></option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitched, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="1/3">1/3</option>
<option value="2/3">2/3</option>
</select>
</td>
<td class="table-col-sm-center">
<button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, true)"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td>
<select class="w-100" data-bind="value: $data.TeamPlayerId, optionsCaption:'- Pitcher -', optionsText: 'Name', optionsValue: 'Value', options: $root.members.pitchingLogs.stats().HomeTeam.AvailablePlayers, event: change: $root.members.pitchingLogs.saveUpdate "><option value="">- Pitcher -</option><option value="1282403">Challender, Brodie (29)</option><option value="1282404">Dakin, Caleb (13)</option><option value="1282405">Fox, Brayden (11)</option><option value="1282406">Gardner, Trevor (12)</option><option value="1282407">Geraci, Brennen (2)</option><option value="1282408">Hull, Brody (99)</option><option value="1282409">Hunt, Wyatt (6)</option><option value="1282410">Jolley, Makay (34)</option><option value="1282411">Titsworth, Beau (4)</option><option value="1282412">Wise, Colton (9)</option></select>
</td>
<td>
<select class="w-100" data-bind="value: $data.PitchCount">
<option></option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitched, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>
<select class="w-100" data-bind="value: $data.InningsPitchedDecimal, event: change: $root.members.pitchingLogs.saveUpdate ">
<option></option>
<option value="1/3">1/3</option>
<option value="2/3">2/3</option>
</select>
</td>
<td class="table-col-sm-center">
<button class="btn btn-danger" data-bind="click: $root.members.pitchingLogs.deleteLog.bind($data, true)"><i class="fa fa-times"></i></button>
</td>
</tr>
</tbody>
<tbody data-bind="if: members.pitchingLogs.stats().HomeTeam.AvailablePlayers().length == 0"></tbody>
<tfoot data-bind="if: members.pitchingLogs.stats().HomeTeam.AvailablePlayers().length > 0">
<tr>
<td colspan="5" class="text-center">
<button class="btn btn-primary" data-bind="click: members.pitchingLogs.addLog.bind($data, true)"><i class="fa fa-plus"></i> Pitcher</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div id="bottom-toolbar" class="toolbar navbar navbar-dark bg-secondary container-collapse">
<div class="btn-toolbar">
<button class="btn btn-primary" type="submit" data-bind="enable: (members.pitchingLogs.gameId() && app.viewModel.hasUpdate()), css: 'btn-success': app.viewModel.hasUpdate() " disabled=""><i class="fa fa-check"></i> Save</button>
</div>
</div>
</form>【问题讨论】：
你写seend是什么意思？ 【参考方案1】：取出表格和选择上的所有.w-100，并将这些选择的宽度设置为fit-content。您可以为此创建一个自定义类：
.w-fit-content
width: fit-content;
<td>
<select class="w-fit-content" />
</td>
演示： https://jsfiddle.net/davidliang2008/b5kx4zty/18/
【讨论】：
以上是关于在 Bootstrap 4 中看不到文本的响应式表格压缩表单字段的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 Carousel 响应式（图像和文本）