时间戳

首页 > 解决方案 > Bootstrap 4 复选框/开关控制 - 如何变小（-sm）？

css - Bootstrap 4 复选框/开关控制 - 如何变小（-sm）？

问题描述

使用 BS4，可以将自定义开关/复选框添加到表单中。不幸的是 - 小的 (-sm) 修改不起作用。我附上了代码示例和图像。

电流输出 https://www.codeply.com/p/gZuRjGvqG2

我想要实现的是让开关变得与输入字段本身一样小（高度）。我找不到“custom-control-sm”或类似的类，并且form-control-sm不起作用。

<div class="input-group input-group-sm">
 <span class="input-group-prepend">
  <span class="input-group-text">
   <i class="fa fa-table"></i>
  </span>
 </span>
 <span class="input-group-prepend">
  <span class="input-group-text">
   <span class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
    <label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
   </span>
  </span>
 </span>
 <input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
 <span class="input-group-append">
  <a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
 </span>
</div>

标签： cssformsbootstrap-4

解决方案

必须进行以下更改：

  1. 添加p-0到<span class="input-group-text">（复选框的那个）。
  2. 添加"style=height: 0;"到<input type="checkbox" ...&<label class="custom-control-label ...以删除不可见元素的任何高度。
  3. 使用自定义边距调整结果滑块的位置<span class="custom-control custom-switch">，即添加："style="margin-left: 24px; margin-right: -12px;"

这应该会产生一个正确的滑块和sm大小。

推荐阅读