Question

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

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元素上的另一个margin-x设置替换label，如下所示：

<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个帮助程序类。

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

1 个答案: