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

Question

我有一个列表组，但是我想降低每个列表组项目之间的直线高度。我尝试了下面的内容，但是最后一个li的格式是关闭的，因为边距底部没有被应用。

CSS

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

 <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元素的另一个边距-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助手类。