Question

我在模态中有一些列表项，我希望每个列表项之间有相同的空格或magin。所以我使用margin-bottom：1rem和margin-right：1rem，但它不起作用。例如，在较大的设备中，我想要有3列，但它只显示两列，其间有很大的余量。同样在中型设备中我想要2列但在列表项之间具有相同的边距和底部，但是它不起作用，列之间的间距非常大。

HTML：

<a  data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open <i class="fa fa-caret-down" aria-hidden="true"></i></a>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <div class="container">
          <div class="row">
            <ul class="categories-list">
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/tags.svg"/>
                <a class="">All Options</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/video.svg"/>
                <a class="">Option1</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/clubbing.svg"/>
                <a class="">Option2</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/concert.svg"/>
                <a class="">Option3</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/conference.svg"/>
                <a class="">Option4</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/exposition.svg"/>
                <a class="">Option5</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/certificate.svg"/>
                <a class="">Option6</a>
              </li>
              <li class="col-lg-4 col-md-6 col-sm-12">
                <img src="{{ URL::to('/') }}/img/categories/literature.svg"/>
                <a class="">Option7</a>
              </li>

            </ul>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

.categories-list{
  display: flex;

  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
}
.categories-list li{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: yellow;
  border-radius: 5px;
  margin-right: 1rem;
}

.categories-list    img{
  width: 20px;
  height: 20px;
}

Answer 1

您的categories-list类具有您想要的边距，正在应用于<ul>元素而不是每个<li>元素。这只会对整个列表产生影响。

在列表项之间具有相同的上边距和右边距

1 个答案: