Blazor，Bootstrap，表格样式 - 我如何清理表格的外观答案

【问题标题】：Blazor, Bootstrap, table styling - how do I clean up the look of my tableBlazor，Bootstrap，表格样式 - 我如何清理表格的外观
【发布时间】：2022-10-31 14:50:13
【问题描述】：

如何解决一些重叠和大小调整的样式问题？

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

【问题讨论】：

标签： css twitter-bootstrap blazor

【解决方案1】：

您已经在为table 和button 元素使用Bootstrap 类，那么为什么不对input 和select 元素也使用适当的Bootstrap 类呢？

将form-control 类添加到您的input 元素，并将form-select 类添加到您的select 元素，以获得一致且统一的样式。

【讨论】：

【解决方案2】：

如果您在应用程序中使用引导框架，那么 @Dimitris Maragkos 提到的内容，您可以在应用程序中添加相同的内容。

使用form-control 和form-select 获得总体外观和尺寸。请参阅下面的屏幕截图。

如果您不想使用引导样式，则需要通过将自定义样式添加到 .css 文件来手动为选择控件添加高度。

找到任一网站.css或任何其他.csswwwroot 文件夹中的文件。添加以下样式会将高度应用于所有选择控件。

select {
  height: 28px; //adjust to your preference.
}

如果您只想将样式添加到表格控件内的选择控件，请使用以下自定义样式。

table tr td select {
  height: 28px; //adjust to your preference.
}

附：Blazor 5.0 及更高版本引入了CSS isolation。在这里，您可以仅将 CSS 限定为特定组件。创建一个.razor.css文件名匹配。剃刀在同一文件夹中为组件创建文件，然后添加上面提到的自定义样式。

【讨论】：