Bootstrap 4 复选框/开关控制 - 如何变小(-sm)?
Posted
技术标签:
【中文标题】Bootstrap 4 复选框/开关控制 - 如何变小(-sm)?【英文标题】:Bootstrap 4 checkbox/switch control - how to be small (-sm)? 【发布时间】:2021-10-14 04:49:24 【问题描述】:使用 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>
【问题讨论】:
【参考方案1】:必须进行以下更改:
-
将
p-0
添加到<span class="input-group-text">
(用于复选框的那个)。
将"style=height: 0;"
添加到<input type="checkbox" ...
和<label class="custom-control-label ...
以移除不可见元素的任何高度。
在<span class="custom-control custom-switch">
上使用自定义边距调整结果滑块的位置,即添加:"style="margin-left: 24px; margin-right: -12px;"
这应该会产生一个外观正确的滑块,并且大小为sm
。
【讨论】:
确实是下流的把戏——但要做到这一点。谢谢你的时间!它让我平静下来,这不是我缺乏知识,而是 BS4 系统中的一个漏洞,小尺寸的复选框/开关很容易丢失......谢谢! 是的,这个问题发生在开关上,使用普通复选框开箱即可正常工作!以上是关于Bootstrap 4 复选框/开关控制 - 如何变小(-sm)?的主要内容,如果未能解决你的问题,请参考以下文章