Chcę uzyskać listę poziomą, a gdy ekran robi się mały, elementy stają się pod sobą, wyjaśniłem to słabo, chcę czegoś takiego, co ma przepełnienie stosu: tutaj wprowadź opis obrazu

Wypróbowałem bootstrap4, ale wygląda na to, że nie działa, gdy ekran się zmniejsza, lista rozszerza dokument, powodując bardzo złe wrażenia użytkownika mobilnego, jakieś rozwiązanie?

<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>
0
Zeyad Shaban 2 wrzesień 2020, 09:04

2 odpowiedzi

Najlepsza odpowiedź
  .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.

Czy to chcesz osiągnąć?

1
Petr Unzeitig 2 wrzesień 2020, 06:15

Responsywna lista poniżej ekranu 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>
0
Ravindra 2 wrzesień 2020, 06:23