Fatal编程技术网
  • html/
  • Html 使引导复选框看起来像引导徽章

Html 使引导复选框看起来像引导徽章

html bootstrap-4

Html 使引导复选框看起来像引导徽章,html,bootstrap-4,Html,Bootstrap 4,我想使引导复选框看起来像引导徽章，同时保留复选框功能。我想也许我可以简单地将复选框标签设计成一个徽章，但它不起作用 <head> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'> <script src='https://maxcdn.bootstrapcdn.com/bootstra

我想使引导复选框看起来像引导徽章，同时保留复选框功能。我想也许我可以简单地将复选框标签设计成一个徽章，但它不起作用

<head>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
        <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
    
        <div class='form-check m-1' style='display:inline-block;'>
        <input id='".$tagDAT[1]."' name='".$tagDAT[1]."' type='checkbox' class='form-check-input form-check-inline'>
        <label class='tag form-check-label text-capitalize' for='".$tagDAT[1]."'>
        <span class='badge badge-secondary'>".$tagDAT[1]."</span></label>
        </div>


“$tagDAT[1]”
这段代码来自PHP。这些复选框看起来像普通的复选框。它忽略了“徽章”代码。我想可能因为它是通过ajax进行回送的，html页面中的引导不会影响回送的代码。这就是为什么我在引导中添加了“head”标签。还是不行

<head>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
        <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
    
        <div class='form-check m-1' style='display:inline-block;'>
        <input id='".$tagDAT[1]."' name='".$tagDAT[1]."' type='checkbox' class='form-check-input form-check-inline'>
        <label class='tag form-check-label text-capitalize' for='".$tagDAT[1]."'>
        <span class='badge badge-secondary'>".$tagDAT[1]."</span></label>
        </div>
有人有想法吗？还是获得相同结果的更好方法

  • 将复选框移到标签内
  • 删除嵌套的
  • 将
    .badge.badge secondary
    直接应用于
  • 将
    .form check inline
    应用于包装，而不是输入
    • 单击
    .badge
    上的任意位置以选中/取消选中该框

    
我的标签
    非常接近。。。但即使应用style='display:none；'，复选框仍会占用空间。知道这是怎么回事吗？这是拼图的最后一块。无需担心，显示：无；在运行时，是div的默认填充使复选框看起来仍然占用空间，但实际上并没有。谢谢