bootstrap 4 自定义复选框

Question

我有一个 asp.net bootstrap 4 自定义复选框，我无法在表单组行中对齐，如图 复选框问题

表单组行代码如下。

<div class="form-group row">

    <asp:Label ID="lblHowDidYouHear" CssClass="col-2 col-form-label" AssociatedControlID="ddlHowDidYouHear" runat="server" Text="How Did You Hear:"></asp:Label>
    <div class="col-4">
        <asp:DropDownList ID="ddlHowDidYouHear" runat="server" CssClass="custom-select"></asp:DropDownList>
    </div>
    <%--ISSUE WITH THE FOLLOWING--%>
    <asp:Label ID="lblNoDetails" CssClass="col-2 col-form-label" runat="server" Text="Personal Information:"></asp:Label>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck" runat="server" />
        <label class="custom-control-label" for="customCheck">Not Provided</label>
    </div>

</div>

就上下文而言，我在引导卡中有几个具有相同设置的表单组行（如上图所示）。

我已经用谷歌搜索了这个问题，并在 Chrome 中玩了 CSS，但没有运气。

有没有人遇到过这个问题，可以提出解决方案吗？

谢谢！

Answer 1

试试下面的代码片段。问题是您有一个带有col css 类的html label 和span 元素。不确定这是否正常工作，但我认为不是。 并且 custom-control custom-checkbox div 不在带有 col 类的 div 内。

<div class="row">
    <div class="col-2 col-form-label">
        <asp:Label ID="lblHowDidYouHear" AssociatedControlID="ddlHowDidYouHear" runat="server" Text="How Did You Hear:"></asp:Label>
    </div>
    <div class="col-4">
        <asp:DropDownList ID="ddlHowDidYouHear" runat="server" CssClass="custom-select"></asp:DropDownList>
    </div>
    <div class="col-2 col-form-label">
        <asp:Label ID="lblNoDetails" runat="server" Text="Personal Information:"></asp:Label>
    </div>
    <div class="col-4">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck" runat="server" />
            <label class="custom-control-label" for="customCheck">Not Provided</label>
        </div>
    </div>
</div>

Answer 2

对于使用标准 asp:RadioButtonList 等的任何人。如果您将其添加到您的 .master 中，那么这将成为一次性工作，并且会自动选择 asp: 元素并为您设置样式：

放置控件时，您只需要定义

CssClass="custom-form-style"

用于列表和单独的项目。如果要在复选框上使用开关样式，则需要使用

CssClass="custom-form-style-switch"

脚本会为您添加所有包装器和类。要注意的另一件事是您必须定义标签。不过，您不需要将标签添加为单独的元素。要定义标签，您需要使用

Text="FooBar"

在控件中。

<asp:RadioButtonList ID="rdGender" runat="server" CssClass="custom-form-style">
   <asp:ListItem Value="M" Text="Male" Selected="True"></asp:ListItem>
   <asp:ListItem Value="F" Text="Female"></asp:ListItem>
</asp:RadioButtonList>

<asp:CheckBoxList ID="cbGender" runat="server" CssClass="custom-form-style">
   <asp:ListItem Value="M" Text="Male" Selected="True"></asp:ListItem>
   <asp:ListItem Value="F" Text="Female"></asp:ListItem>
</asp:CheckBoxList>

<asp:CheckBox ID="CheckBox1" runat="server" Text="FooBar" CssClass="custom-form-style" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="FooBar" CssClass="custom-form-style-switch" />
<asp:RadioButton ID="RadioButton1" runat="server" Text="FooBar" CssClass="custom-form-style" />

默认情况下，放置在同一父 div 中的元素将垂直显示。如果你想要一个水平布局，你将不得不玩弄它。

处理格式化的脚本在一个函数中。这样做是为了在您动态构建元素时可以调用样式，而无需重新加载页面。

调用函数使用

<script type="text/javascript">
   BootStrapChecksRadios()
</script>

这是页面加载脚本。

<script type="text/javascript">
   $(document).ready(function () {
      BootStrapChecksRadios()
   });

   function BootStrapChecksRadios() {
      $('input', '.custom-form-style').each(function () {
         if ($(this).parent().attr('class') == 'custom-form-style')
         {
            $(this).unwrap();
         }
         $(this).addClass("custom-control-input " + $(this).attr('id'))
         $("label[for='" + $(this).attr('id') + "']").addClass("custom-control-label " + $(this).attr('id'))
         if ($(this).attr('type') == 'radio') {
            $("." + $(this).attr('id')).wrapAll("<div class='custom-control custom-radio' />");
         } else {
            $("." + $(this).attr('id')).wrapAll("<div class='custom-control custom-checkbox' />");
         }
      });
      $('input[type=checkbox]', '.custom-form-style-switch').each(function () {
         if ($(this).parent().attr('class') == 'custom-form-style-switch')
         {
            $(this).unwrap();
         }
         $(this).addClass("custom-control-input " + $(this).attr('id'))
         $("label[for='" + $(this).attr('id') + "']").addClass("custom-control-label " + $(this).attr('id'))
         $("." + $(this).attr('id')).wrapAll("<div class='custom-control custom-switch' />");
      });
   }
</script>

Answer 3

这对我有用

<div class="custom-control custom-switch">
            <asp:CheckBox ID="Checkbox1" runat="server" ValidationGroup="Nuevo" />
            <label class="custom-control-label" for='<%: Checkbox1.ClientID %>'>Visible</label>

<script>
    $(document).ready(function () {
        $('#' + '<%: VisibleChk.ClientID %>').addClass("custom-control-input");

    });</script>