我想对复选框使用 bootstrap 4 自定义控件,在阅读了我写的文档后,但未显示复选框,我做错了什么?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="card-body"><label>Add Productc Varian for </label> 
  <div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div> 
  <div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div> 
  <div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div> 
  <div class="form-group"> 
    <div class="custom-control custom-checkbox"><label for="formGroupExampleInput2">Default</label><input type="checkbox" class="custom-control-input" id="customControlValidation1"></div> 
  </div> 
   
<hr> 
<div class="form-group"> 
  <div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div> 
</div> 
</div>

请您参考如下方法:

只需添加错过的类(class) custom-control-label为标签。您只想关注自定义表单 Bootstrap-v4 form以供引用。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="card-body"> 
    <label>Add Productc Varian for </label> 
    <div class="form-group"> 
        <label for="formGroupExampleInput">Code</label> 
        <input type="text" class="form-control" placeholder="Enter Name"> 
    </div> 
    <div class="form-group"> 
        <label for="formGroupExampleInput">Name</label> 
        <input type="text" class="form-control" placeholder="Enter Name"> 
    </div> 
    <div class="form-group"> 
        <label for="formGroupExampleInput2">Description</label> 
        <textarea class="form-control" placeholder="Description"></textarea> 
    </div>   
    <div class="form-group"> 
      <div class="custom-control custom-checkbox"> 
          <input type="checkbox" class="custom-control-input" id="customCheck1"> 
          <label class="custom-control-label" for="customCheck1">Default</label> 
      </div> 
    </div> 
    <hr> 
    <div class="form-group"> 
        <div class="col-12"> 
            <button type="button" class="btn btn-default float-right">Add</button> 
            <button type="button" class="btn btn-danger float-right">Cancel</button> 
        </div> 
    </div> 
</div>


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!