Question

在阅读我编写的文档后，我想使用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>

Answer 1

<!-- begin snippet: js hide: false console: true babel: false -->

 <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="customCheck" name="example1">
        <label class="custom-control-label" for="customCheck">Check this custom checkbox</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>

Answer 2

这将为您解决问题。只需遵循自定义复选框的正确语法即可。

<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="customControlValidation1">
    <label class="custom-control-label" for="customControlValidation1">Default</label>
  </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>

来源：JS Bin

Answer 3

只需为标签添加错过的类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>

Answer 4

我遇到了同样的问题，问题是我的Bootstrap 4文件没有更新。只需下载最新版本，就可以了

Bootstrap 4自定义复选框未显示

4 个答案: