html - 如何减少 Bootstrap 4 列表组中的间距

Question

我有一个列表组，但我想减少每个列表组项之间的行高。我在下面尝试了以下操作，但最后一个 li 的格式已关闭，因为未应用 margin-bottom。

CSS

 .list-group-item{
        margin-bottom: -6px;
        margin-top: -6px;  
    }

HTML

 <ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
            <li  class="list-group-item d-flex p-0 border-0" >
                <input  class="my-auto ml-2" type="checkbox" id="CheckBox1" />
                <label style="font-size: 13px;"class="mt-2 ml-2 w-100 " for="CheckBox1">Acupunture</label>
            </li>
            <li class="list-group-item d-flex p-0 border-0">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox2" />
                <label style="font-size: 13px" class=" mt-2 ml-2 w-100" for="CheckBox2">Ayurveda </label>
            </li>
            <li class="list-group-item d-flex p-0 border-0 ">
                <input class="my-auto ml-2" type="checkbox" id="CheckBox3" />
                <label style="font-size: 13px" class="mt-2  ml-2 w-100" for="CheckBox3">Homeopathy</label>
            </li>
        </ul>

Answer 1

您可以尝试将 my-auto 替换为 input 和 label 元素上的另一个 margin-x 设置，如下所示:

<ul class="list-group ml-3 mr-3 mt-1 sidebar-list-items ">
  <li  class="list-group-item d-flex p-0 border-0" >
    <input  class="ml-2 my-0" type="checkbox" id="CheckBox1" />
    <label style="font-size: 13px;"class="my-0 ml-2 w-100 " for="CheckBox1">Acupunture</label>
  </li>
  <li class="list-group-item d-flex p-0 border-0">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox2" />
    <label style="font-size: 13px" class=" my-0 ml-2 w-100" for="CheckBox2">Ayurveda </label>
  </li>
  <li class="list-group-item d-flex p-0 border-0 ">
    <input class="my-0 ml-2" type="checkbox" id="CheckBox3" />
    <label style="font-size: 13px" class="my-0 ml-2 w-100" for="CheckBox3">Homeopathy</label>
  </li>
</ul>

您可以尝试 my-0、my-1、...，直到 my-5 帮助程序类之一。