Neste artigo, vamos explorar como criar uma lista horizontal responsiva usando o Bootstrap 5. As listas horizontais são componentes responsivos para exibir uma série de conteúdos. Vamos começar com um exemplo básico e, em seguida, explorar algumas variantes responsivas.
Exemplo Básico
Para criar uma lista horizontal, você precisa adicionar a classe .list-group-horizontal à tag <ul>. Isso mudará o layout dos itens do grupo de lista de vertical para horizontal em todos os pontos de interrupção. Aqui está o código HTML para o exemplo básico:
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>Neste exemplo, temos uma lista horizontal com três itens. Cada item é representado por uma tag <li> com a classe .list-group-item. Você pode adicionar quantos itens desejar à lista.
Itens de Largura Igual
Se você deseja que os itens da lista horizontal tenham largura igual, você pode adicionar a classe .flex-fill a cada item. Isso fará com que os itens ocupem o espaço disponível horizontalmente. Aqui está o código HTML para um exemplo com itens de largura igual:
<ul class="list-group list-group-horizontal">
<li class="list-group-item flex-fill">Item 1</li>
<li class="list-group-item flex-fill">Item 2</li>
<li class="list-group-item flex-fill">Item 3</li>
</ul>Neste exemplo, cada item da lista tem a classe .flex-fill, o que garante que eles tenham largura igual.
Variante Responsiva
Além da classe .list-group-horizontal, você também pode usar variantes responsivas para tornar a lista horizontal a partir de um determinado ponto de interrupção. As variantes responsivas têm a seguinte estrutura de classe: .list-group-horizontal-{sm|md|lg|xl|xxl}. Por exemplo, se você quiser que a lista horizontal comece a partir do ponto de interrupção md (médio), você pode usar a classe .list-group-horizontal-md. Aqui está um exemplo de código HTML:
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>Neste exemplo, a lista horizontal começará a partir do ponto de interrupção md (médio). Você pode substituir md por qualquer outro ponto de interrupção desejado, como sm, lg, xl ou xxl.
Conclusão
Neste artigo, exploramos como criar uma lista horizontal responsiva usando o Bootstrap 5. Começamos com um exemplo básico e, em seguida, vimos como adicionar a classe .flex-fill para obter itens de largura igual. Também discutimos as variantes responsivas e como usá-las para controlar o comportamento da lista horizontal em diferentes pontos de interrupção. Agora você pode criar facilmente listas horizontais responsivas em seus projetos usando o Bootstrap 5.
