HTML 表格行中有两个输入列，但只有第一个有效

Question

我正在构建一个地图应用程序，用户可以在其中将功能添加到数据库，然后在地图页面上将功能列在 HTML 表中。 表中有 3 列：功能名称、选定（这是一个带有开/关滑块开关的输入控件）和颜色（这是一个 type="color" 的输入控件，用于显示颜色选择器以区分功能） 。 单击“显示”按钮时，将从数据库中检索每个选定要素的所有纬度/经度，并将每个要素的所有位置的图钉放置在地图上，并使用该要素的选定颜色。

我的问题是这样的：只有每行中的第一个输入控件正在工作：例如如果我先有开关控制，它工作正常，但颜色选择器不起作用，反之亦然。

以下是相关代码（该示例首先有开关）：

    <div class="col-md-2">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.FeatureName)
                    </th>
                    <th>
                        Selected
                    </th>
                    <th>
                        Color
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.FeatureName)
                        </td>
                        <td>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" />
                            </div>
                        </td>
                        <td>
                            <div class="form-check">
                                <input class="form-check-input" type="color" />
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

我不是 Bootstrap 专家，因此非常感谢有关如何声明输入控件的任何帮助！！

提前致谢！ 鲍勃

Answer 1

弄清楚了 - 使用了错误的 Bootstrap 5 类。 第一个控制（开关）应该是：

<input class="form-control form-check-input" type="checkbox"/>

第二个控件（颜色选择器）应该是：

<input class="form-control form-control-color" type="color"/>

希望这对某人有用！