协助设计动态 asp:CheckBoxList 使用 Bootstrap答案

【问题标题】：Assistance with styling a dynamic asp:CheckBoxList using Bootstrap协助设计动态 asp:CheckBoxList 使用 Bootstrap
【发布时间】：2020-08-14 08:30:40
【问题描述】：

我有一个 asp:CheckBoxList 正在填充数据库中的值。我使用 Bootstrap 4.3.1 作为我的框架。我正在尝试使用默认示例设置 CheckBoxList 的样式：

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>

这是我的 CheckBoxList 代码：

<asp:CheckBoxList ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>

这是我尝试过的，但是 CheckBoxList 消失了：

        <div class=" custom-control custom-checkbox my-1 mr-sm-2">
        <asp:CheckBoxList type="checkbox" CssClass="custom-control-input" ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>
    </div>

如果有人可以就我如何实现这一目标提供一些意见或建议，那就太好了。

【问题讨论】：

标签： c# css asp.net bootstrap-4 checkboxlist

【解决方案1】：

引导类不能直接在 CheckBoxList 控件上工作。

当我需要这样做时，我创建了自己的类并将它们应用到 CheckBoxList 周围的 div 元素。

我还封装了一个fieldset 以确保可访问性合规性。

CSS 补充：

.checkbox.checkboxlist input[type="checkbox"]
{
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.checkbox.checkboxlist label
{
    margin-bottom: 0;
    display: inline-block;
}

fieldset legend
{
    font-size: inherit;
}

fieldset .checkbox
{
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

标记：

<fieldset>
    <legend>Label for CheckBoxList</legend>
    <div class="checkbox checkboxlist">
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
            <asp:ListItem Text="Option one"></asp:ListItem>
            <asp:ListItem Text="Option two"></asp:ListItem>
            <asp:ListItem Text="Option three"></asp:ListItem>
        </asp:CheckBoxList>
    </div>
</fieldset>

我的blog 上还有一些 RadioButtonLists 和水平表单的类，我从那里复制了大部分答案。

【讨论】：