• User

    [Boostrap] Gestire il riordinamento delle colonne della pagina

    Buongiorno a tutti,
    sto lavorando a un nuovo progetto web, che dovrà avere un layout responsivo e per questo motivo ho deciso di avvalermi del framework boostrap. Ora il layout che ho progettato è a tre colonne (sinistra,centrale,destra), e su schermi desktop si presenta in questo modo:

    h t t p : / / s1.postimg.org/83u3kdvcf/schem_1.png

    Quando riduco le dimensioni della finestra, le colonne si impilano e anche gli elementi al suo interno fanno la stessa cosa, ottenendo il seguente risultato:

    h t t p : / / s21.postimg.org/adlabz27b/fig_2.png

    Ecco, il problema è proprio questo. Io vorrei che quando il sito viene visualizzato sui dispositivi mobile(o tablet, o comunque risoluzioni ridotte), le colonne laterali si allineassero in orizzontale al di sopra della colonna centrale(e che gli elementi all'interno). Praticamente ambisco ad avere il seguente risultato:

    h t t p : / / s30.postimg.org/aj0un1qv5/fig_3.png

    Purtroppo, dopo svariati tentativi, non sono riuscito ad ottenere il risultato sperato.

    Il codice(semplificato) è questo:

    [HTML]

    <body>

    <nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
    <a class="navbar-brand" href="index.php"><img src="img/logo.png"></a>
    </div>
    </nav>

    <div class="container">

    <div class="row">
    <div class="col-xs-2 ">
    Col_sx
    </div>

    <div class="col-xs-8">
    Col_cx
    </div>

    <div class="col-xs-2 "> Col_dx
    Col_dx
    </div>

    </div>
    </div>

    </body>

    [/HTML]

    In attesa di una eventuale risposta

    Buona domenica a tutti :gthi:


  • Moderatore

    Spostato nella sezione più adeguata.


  • User

    Allora per prima cosa, con il codice html che hai scritto il risultato da mobile non viene come in figura due.
    Inoltre in figura 3 cambi completamente l'ordine del flusso delle colonne. Da col_sx, col_cx, col_dx passi a col_dx, col_sx, col_cx.
    Ecco il codice che dovresti utilizzare:

    [HTML]
    <div class="container">
    <div class="row">

    <div class="col-sm-2 visible-xs-block">  
      Col-dx 
    </div>
    
    <div class="col-sm-2 ">
      Col_sx 
    </div>
    
    <div class="col-sm-8">
      Col_cx
    </div>
    
    <div class="col-sm-2 hidden-xs">
      Col_dx
    </div>
    

    </div>
    </div>
    [/HTML]

    In questo Modo da schermi maggiori a 768px vedrai il secondo box(hidden-xs), mentre da schermi minori a 768px vedrai il primo box(visible-xs-block).
    Inoltre per tenere gli elementi interni in riga devi dare la classe col-xs-*.


  • User

    Grande, grazie mille! 🙂