Question

我使用Bootstrap有以下场景。

问题在于，当我更改第一个复选框的可见性时，它会打破布局的间距。

<label for="">Filter</label>
<div class="checkbox">
    <label>
        <input type="checkbox"> Filter 1
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> Filter 2
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> Filter 3
    </label>
</div>

您可以点击按钮来测试in this CodePen。

我是否构建了糟糕的HTML？或者我错过了一些功能

Answer 1

.checkbox + .checkbox的margin-top设置为-5px，无论第一个复选框是否可见，此规则都适用。更好的解决方案是在上面的文本中添加边距（应该没有标签！），并且不要为不同的复选框类设置不同的边距。

<p>Filter</p>
  <ul  class="checkbox list-unstyled">
  <li> <label> <input type="checkbox"> Filter 1</label> </li>
  <li> <label> <input type="checkbox"> Filter 2</label> </li>
</ul>

您需要将JS更改为$（＆＃34; .checkbox li＆＃34;）。first（）。toggleClass（＆＃39; hidden＆＃39;）

Bootstrap - 更改visiblity时，复选框组的布局间距中断

1 个答案: