时间戳

首页 > 解决方案 > 如何减少 Bootstrap 4 列表组中的间距

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

问题描述

我有一个列表组，但我想减少每个列表组项之间的行高。我在下面尝试了以下操作，但最后一个 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>

标签： htmlcssbootstrap-4

解决方案

您可以尝试用和元素my-auto上的另一个 margin-x 设置替换，如下所示：inputlabel

<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辅助类。

推荐阅读