2

Eu tenho 30 itens que vão vir em ordem alfabética.

Eu preciso distribuir estes itens em 3 colunas por ordem alfabética VERTICAL.

O problema é que no Bootstrap, os blocos vão casando um ao lado do outro fazendo com que os itens fiquem em ordem alfabética horizontal e não VERTICAL.

Vou mostar o que preciso:

<div class="row">
    <div class="col-md-4">
        <span>aa</span>
        <span>ab</span>
        <span>ac</span>
        <span>ad</span>
        <span>ae</span>
    </div>  
    <div class="col-md-4">
        <span>af</span>
        <span>ag</span>
        <span>ah</span>
        <span>ai</span>
        <span>aj</span>
    </div>  
    <div class="col-md-4">
        <span>ak</span>
        <span>al</span>
        <span>am</span>
        <span>an</span>
        <span>ao</span>
    </div>
</div>

Os meus itens vêm daqui:

<?php 
     foreach ($qartie as $bairros => $bairro) {

     } 
?>
6
  • Cadê sua <ul> ou <ol>? No Bootstrap temos a classes para lista que exibem ela em horizontal
    – Leonardo
    12/01/2016 às 20:06
  • @lvcs desculpe o erro de digitação. Não estou usando listas. 12/01/2016 às 20:14
  • Acho que seria melhor usar lista ou paragrafo ou colocar <br> no fim de cada um
    – Leonardo
    12/01/2016 às 20:16
  • Não consigo ter uma ideia lógica de como resolver este problema @lvcs ... 12/01/2016 às 20:20
  • Estou montando um aqui, seria três colunas com 10 elementos cada em ordem alfabética?
    – Leonardo
    12/01/2016 às 20:21

2 Respostas 2

4

Um exemplo simples:

<!DOCTYPE html>
<html lang="pt">

    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    </head>

    <body>
        <div class="row">
            <div class="col-md-4">
            <?php 
            $array = array( "b","a","j","k","l",
                            "x","q","j","t","c",
                            "q","e","z","u","o",
                            "e","t","h","e","p",
                            "r","d","u","z","m",
                            "t","y","u","n","y"); //array com 30 posições

            sort($array); // ordem alfabetica

            for($i = 0; $i < count($array); $i ++) { // vai percorrer todo o meu array
                echo "\t<span>{$array[$i]}</span><br/>\n"; //printa meu elemento (\n e \t apenas para formatação do html) 

                if((($i + 1) % 10 == 0) and ($i < count($array)-1)) { // como é separado de 10 em 10, quando o resto da divisão do meu contador atual por 10 for 0, quer dizer que ele fezou no item 10 daquela coluna
                    echo "\n\t</div>\n\t<div class='col-md-4'>\n"; // assim ele termina a coluna anterior e incia outra
                }
            }

            ?>
            </div>
        </div>

    </body>

    </html>
4
  • Então, legal, +1, mas tava olhando aqui que abre uma div a mais (vazia), veja aqui no Ideone, e isso no bootstrap vai dar problema porque o máximo são 12 grids... tentei algumas coisas aqui como incluir um && ($i < count($array) + 1)no if, mas não resolveu... como vc resolveria isso (pra não abrir esta última coluna)? Valeu.
    – gustavox
    12/01/2016 às 22:14
  • 2
    +1 Pela estrutura elegante da array() e apenas utilizar uma if para fechar/abrir a div, ao invés de dois (um para abrir e fechar). :-]
    – Inkeliz
    13/01/2016 às 0:40
  • 1
    @gustavox é só colocar and ($i < count($array)-1) no if, assim quando chegar no último elemento do array ele não entrará no if e não criará essa div.. Porém não há problema, pois como o HTML é estruturado, de cima pra baixo ele ignoraria a div. Editei a resposta
    – Leonardo
    13/01/2016 às 1:44
  • Legal, entendi, valeu pela explicação complementar!
    – gustavox
    13/01/2016 às 4:47
0

Se quiser que tudo fique dentro de uma coluna do tamanho 4 do bootstrap pode fazer assim também ..

<div class="row">
    <div class="col-md-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <span>aa</span>
                    <span>ab</span>
                    <span>ac</span>
                    <span>ad</span>
                    <span>ae</span>
                </div>
            </div>
        </div>
    </div>
</div>

Espero ter ajudado, pelo meu entendimento da parte do seu código, desta forma resolveria.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .