如何解决这些重叠和大小调整的样式问题？
<table class="table table-striped table-sm table-bordered">
<thead>
<tr>
<th>Date Worked</th>
<th>Event Code</th>
<th>Event Name</th>
<th>Time In</th>
<th>Time Out</th>
<th>Hours Worked</th>
</tr>
</thead>
<tbody>
<tr>
<td><input @bind=newEntry.DateWorked /></td>
<td>
<select name="counties" id="counties" @onchange="@((args)=>Test(args, newEntry))">
<option value=" ">Select</option>
<option value="SWN">SWN</option>
<option value="WT">WT</option>
<option value="SE">SE</option>
<option value="HG">HG</option>
<option value="LM">LM</option>
<option value="WM">WM</option>
<option value="CLEAN">CLEAN</option>
</select>
</td>
<td>@newEntry.EventName</td>
<td><input @bind=newEntry.TimeIn /></td>
<td><input @bind=newEntry.TimeOut /></td>
@if (!string.IsNullOrWhiteSpace(newEntry.TimeIn) && !string.IsNullOrWhiteSpace(newEntry.TimeOut))
{
<td>@(GetTimeElapsed(newEntry.TimeIn, newEntry.TimeOut))</td>
}
<td>
<button @onclick="SaveNewRecord" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
2条答案
按热度按时间vd2z7a6w1#
您已经为
table和button元素使用了Bootstrap类，那么为什么不为input和select元素也使用相应的Bootstrap类呢？将
form-control类添加到input元素，将form-select类添加到select元素，以获得一致和统一的样式。aydmsdu92#
如果你在你的应用程序中使用引导框架，那么@Dimitris Maragkos已经提到了什么，你可以在你的应用程序中添加同样的东西。
使用
form-control和form-select来获得一般外观和大小。请参考下面的屏幕截图。如果不希望使用引导样式，则需要通过向.css文件中添加自定义样式来手动向选择控件添加高度。
在
wwwroot文件夹中找到 site.css 或任何其他 .css 文件。添加以下样式将对所有选择控件应用高度。如果只想将样式添加到表控件内的选择控件，请使用下面的自定义样式。
**P.S.**Blazor 5.0及更高版本引入了CSS isolation。在这里，您只能将CSS范围限定为特定组件。在同一文件夹中为该组件创建一个与 .razor 文件名匹配的 .razor.css 文件，然后添加上面提到的自定义样式。