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

对于使用标准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 2

这对我有用

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

boostrap 4自定义复选框

2 个答案: