Bootstrap样式不适用于动态复选框

Question

样本

主要联系人是一个静态元素，当我生成另一个是联系人2时，css会更改为复选框。

这是我用来添加另一个元素的代码

$(document.body).on('click', "#add-user", function (){  
        var counter = $('#counter-user').val();
        counter++;
        $('#user-new').append("<tr data-id='"+ counter +"'><td><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-12' style='text-align:left;font-size:16px'><b>Contact "+ counter +"</b></label> </div></div><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>First <span class='required'> * </span> </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='required caps trim form-control' name='efirst"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Last <span class='required'> * </span> </label><div class='col-md-8'><div class='input-icon right'> <i class='fa'></i><input type='text' class='required caps trim form-control' name='elast"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Title </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='form-control caps trim ' name='etitle"+ counter +"'/> </div></div></div></div><div class='row' ><div class='form-group col-md-4 col-sm-12'><label class='control-label col-md-4'>Phone </label> <div class='col-md-8'><div class='input-icon right'><i class='fa'></i><input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='ephone"+ counter +"'/> </div></div></div><div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Mobile </label><div class='col-md-8'><div class='input-icon right'><i class='fa'></i> <input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='emobile"+ counter +"'/> </div> </div> </div> <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Department </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='form-control caps trim ' name='edept"+ counter +"'/> </div> </div> </div></div> <div class='row' > <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Email <span class='required'>*</span> </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='required validate-email form-control trim' name='eemail"+ counter +"'> </div> </div> </div><div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Fax </label> <div class='col-md-8'> <div class='input-icon right'> <i class='fa'></i> <input type='text' class='numbers validate-phone form-control trim user-phone mask-phone' name='efax"+ counter +"'/> </div> </div> </div> <div class='form-group col-md-4 col-sm-12'> <label class='control-label col-md-4'>Notification<span class='required'>*</span> </label> <div class='col-md-8'> <div class='form-group col-md-4 col-sm-12' style='margin-right:20px'> <label class='control-label' style='font-size:12px;'>Email </label> <input type='checkbox' class='form-control' name='not-email"+ counter +"' id='eemail' value='yes' data-user-count='"+ counter +"' checked /></div> <div class='form-group col-md-4 col-sm-12' style='margin-right:20px'> <label class='control-label' style='font-size:12px;'>Text </label> <input type='checkbox' class='form-control notif' name='not-text"+ counter +"' id='emobile' value='yes' data-user-count='"+ counter +"'/></div><div class='form-group col-md-4 col-sm-12'> <label class='control-label' style='font-size:12px;'>Fax </label><input type='checkbox' class='form-control notif' name='not-fax"+ counter +"' id='efax'  value='yes' data-user-count='"+ counter +"'/></div></div></div></div></td></tr>");
        $('#counter-user').val(counter);
        $(".user-phone").inputmask("(999) 999-9999");
        $('#remove-user').show();
    });

Answer 1

您的复选框不应包含“form-control”类。如果你删除它，它看起来很正常。

我不确定您想要哪种样式，但默认情况下，引导程序复选框看起来与图像第一部分中的样式不同。它们是灰色的，看起来像普通的复选框：

也许您已经应用了自己的样式，而不是应用于新元素？