boostrap 4自定义复选框 [英] boostrap 4 custom checkbox

问题描述

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

i have an asp.net bootstrap 4 custom check box which i cannot align in the form group row as pictured Issue with check box

表单组行代码如下。

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

对于上下文，我有几个具有相同设置的表单组行（如上图所示）

For context, i have several of these form-group rows (as pictured above) with the same setup within a bootstrap card.

我已经解决了这个问题，并在Chrome中使用CSS玩了运气。

I have googled the hell out of this issue and played with the css in Chrome with no luck.

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

Has someone come across this issue before and could propose a solution please?

谢谢！

推荐答案

这对我有用

<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自定义复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！