Bootstrap 4：在列元素间隐藏复选框并让列填满行的实现方法

嘿，这个问题我之前也碰到过！你用的invisible类其实只是让元素不可见，但它仍然会在页面布局里占据位置——这就是为什么你的两个col没法填满整行的原因。

要彻底让这个复选框不占空间，你需要用Bootstrap自带的d-none类来替代invisible。d-none会设置元素的display: none，直接把它从布局流中移除，这样就不会影响旁边的col元素了。

修改后的代码如下：

<div class="container">
  <div class="row">
    <a class="col-2"> 1 of 2 </a>
    <input type="checkbox" class="d-none">
    <input type="text" class="col-10" value="2 of 2">
  </div>
</div>

原理很简单：Bootstrap的栅格系统里col-2 + col-10刚好等于12，填满整个row。当你用d-none隐藏中间的复选框后，这两个col就会自动占满整行，完全符合你想要的效果。

如果之后你需要在特定屏幕尺寸下显示这个复选框，还可以结合响应式类，比如d-sm-block d-none这样的组合，但如果只是一直隐藏的话，d-none就足够用啦。

内容的提问来源于stack exchange，提问作者Tobia