Бутстрап 4 ASP.NET выравнивание флажков и удобство использования
Всем Привет,
Я вырываю волосы, пытаясь выровнять пользовательский флажок Bootstrap 4 в моей группе форм.
Кроме того, флажок не работает, если вы нажмете на флажок или метку, но делает это, если вы нажмете примерно на 1 см слева от флажка.
Изображение отображающее форму можно посмотреть здесь [https://postimg.cc/34CBTp9p]
У меня есть следующий код (с комментарием "проблема со следующим", выделяющим флажок.)
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="checktest.aspx.vb" Inherits="CustomerCareSystemWeb.checktest" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Check Box Test</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <form id="form1" runat="server"> <br /> <div class="card"> <div class="card-body"> <h4 class="card-title">Student Search/Create</h4> <hr /> <div class="form-group row"> <asp:Label ID="lblStudentId" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentId" runat="server" Text="Student Id:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentId" CssClass="form-control" runat="server"></asp:TextBox> </div> <asp:Label ID="lblStudentEmail" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentEmail" runat="server" Text="Student Email:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentEmail" CssClass="form-control" runat="server"></asp:TextBox> </div> </div> <div class="form-group row"> <asp:Label ID="lblFirstName" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentFirstName" runat="server" Text="Student First Name:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentFirstName" CssClass="form-control" runat="server"></asp:TextBox> </div> <asp:Label ID="lblStudentSurname" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentSurname" runat="server" Text="Student Surname:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentSurname" CssClass="form-control" runat="server"></asp:TextBox> </div> </div> <div class="form-group row"> <asp:Label ID="lblStudentMobile" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentMobile" runat="server" Text="Student Mobile Phone:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentMobile" CssClass="form-control" runat="server"></asp:TextBox> </div> <asp:Label ID="lblStudentHomePhone" CssClass="col-2 col-form-label" AssociatedControlID="txtStudentHomePhone" runat="server" Text="Student Home Phone:"></asp:Label> <div class="col-4"> <asp:TextBox ID="txtStudentHomePhone" CssClass="form-control" runat="server"></asp:TextBox> </div> </div> <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" AssociatedControlID="customCheck" 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> <div class="form-group row"> <div class="col-8"></div> <div class="col-2"> <asp:Button ID="btnSearchStudent" CssClass="btn btn-primary btn-block" runat="server" Text="Search Student" /> </div> </div> </div> </div> </form> </body> </html>
Любая помощь будет очень признательна.
Что я уже пробовал:
Помимо нескольких google искал различные связанные термины. Я также пробовал добавлять отступы и пытаться отлаживать css в Chrome.