+ Rispondi alla Discussione
Risultati da 1 a 4 di 4

[Boostrap] Gestire il riordinamento delle colonne della pagina

Ultimo Messaggio di Mr.Php il:
  1. #1
    User
    Data Registrazione
    Dec 2015
    Località
    Riace
    Messaggi
    31

    [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:

    Codice 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>

    In attesa di una eventuale risposta

    Buona domenica a tutti

  2. #2
    Moderatore L'avatar di Shad
    Data Registrazione
    Jun 2007
    Località
    Napoli
    Messaggi
    633
    Segui Shad su Twitter Aggiungi Shad su Linkedin
    Spostato nella sezione più adeguata.

  3. #3
    User
    Data Registrazione
    Mar 2014
    Località
    vicenza
    Messaggi
    22
    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:

    Codice 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>
    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-*.
    Ultima modifica di simo90; 27-01-16 alle 10:44

  4. #4
    User
    Data Registrazione
    Dec 2015
    Località
    Riace
    Messaggi
    31
    Grande, grazie mille! :-)

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.