Bootstrap 4表-单元格内容的水平对齐不起作用
Bootstrap 4表-单元格内容的水平对齐不起作用
提问于 2020-02-28 11:41:42
我使用bootstrap 4表来创建一个可配置的24x7小时调度程序。我需要每个表单元格中的单选按钮水平对齐，始终为每个表单元格提供所需的宽度，但我正在努力使其正常工作。请注意，当表格超出屏幕宽度且需要水平调整器时，就会出现问题。
突出显示此问题的代码如下：
<div class="row form-group ml-md-2 mr-md-2">
<div class="col-md-12">
<table class="table table-bordered table-responsive table-hover table-striped table-condensed">
<thead>
<tr>
<th></th>
<th>8am</th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12pm</th>
<th>13pm</th>
<th>14pm</th>
<th>15pm</th>
<th>16pm</th>
<th>17pm</th>
<th>18pm</th>
<th>13pm</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Sun</strong></td>
<td>
<div class="form-group">
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="Manual" />
<span asp-validation-for=@Model.MachineState></span>Manual
</label>
</div>
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="On" />
<span asp-validation-for=@Model.MachineState></span>On
</label>
</div>
<div class="radio">
<label class="control-label font-weight-bold">
<input type="radio" asp-for="@Model.MachineState" value="Off" />
<span asp-validation-for=@Model.MachineState></span>Off
</label>
</div>
</div>
</td>
... @*Repeat this <td></td> for the other day - time cells. *@
</tr>
</tbody>
</table>
</div>
</div>
[![enter image description here][1]][1]回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-02 03:30:37
正如你的评论所说，你需要添加最小宽度来保持它们的水平。
您只需要在样式中添加以下css代码。
<style>
.table td:not(:first-child) {
min-width: 100px;
}
</style>结果如下：
Stack Overflow用户
发布于 2020-02-28 12:55:21
1)如果您使用的是bootsrap4，请添加类form-check-inline以使单选按钮出现在同一行上。请查看radio-line以获取参考。
2) table是自动调整大小的，它会自动调整，所以不是给每个单元格自动滚动，而是给整个表格自动滚动。在下面的类中使用CSS
overflow-y: hidden;
overflow-x: auto;3)查看下面的horizontally-scroll with radio-buttons inline以获取参考。
4)但是如果你想让每个单元格自动滚动，创建一个类并将下面的CSS添加到每个<td>中
max-width: 20px;
overflow-y: auto;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60450996
复制相关文章
相似问题
如何获得包含\n的最后一行？
无法确定如何检查list是否包含0
如何快速确定表是否多于N行？
检查最后n天的行是否存在
PowerShell:如何确定SQL查询是否返回0行
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
