如何制作响应式水平列表

Question

我想实现一个水平列表，当屏幕变小时，项目会相互重叠，我解释得不好，我想要类似堆栈溢出的东西：

我尝试了一些 bootstrap4，但它似乎不起作用，当屏幕变小时，列表会扩展文档，导致非常糟糕的移动用户体验，有什么解决方案吗？

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Answer 1

  .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1000px;
  }

  .list-group-item{
    min-width: 200px;
  }

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
</ul>

Flexbox

这是你想要达到的目标吗？

Answer 2

响应列表低于 767px 屏幕

ul{
  list-style-type:none;
}
ul li{
  display: inline-block;
  border:1px solid grey;
  padding: 5px;
  color:blue;
}
@media only screen and (max-width: 767px){
  ul{
    width: 400px;
  }
  ul li {
    color: red;
    display: block;
  }
}

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

如何制作响应式水平列表

How to make a responsive horizontal list

html

css

responsive-design