Настраиваемый флажок boostrap 4

Попробуйте следующий фрагмент. Проблема в том, что у вас есть элемент html label и span с классом col css. Не уверен, что это работает правильно, но я думаю, что нет. И custom-control custom-checkbox div не находится внутри div с классом col.

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

Для тех, кто использует стандартный 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>

Это сработало для меня

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