+ Rispondi alla Discussione
Risultati da 1 a 2 di 2

Bootstrap quesito

Ultimo Messaggio di Giorgiotave il:
  1. #1
    User Newbie L'avatar di simoneim7
    Data Registrazione
    May 2018
    Località
    Milano
    Messaggi
    4

    Bootstrap quesito

    Ciao a tutti, volevo avere un parere da parte vostra riguardo questo problema che ho con Bootstrap, sicuramente causato da una mia scarsa conoscenza di Bootstrap.
    In pratica volevo fare un contenitore con dentro 5 colonne.
    1 colonna sulla sinistra lunga come il contenitore e sulla destra 4 colonne su 2 righe (1 riga: colonna 4 e colonna 8 2 riga: colonna 8 e colonna 4).
    Se le metto in questo ordine si incasina tutto.
    Questo è il codice che ho usato:
    Codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    <head>
    <meta charset='utf-8' />
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <header>
     <section>
    <div class="container mar-t-100">
    <div class="row">
    <div class="col-md-3 p-5 bg-cyan-lh">
    <h4>LOREM IPSUM 1</h4>
    <p class="text-secondary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    </div>
    <div class="col-md-9">
    <div class="row">
    <div class="col-md-4 bg-cyan text-white p-5 my-auto h-100">
    <p>
    <span class="txt-serif">LOREM IPSUM SLOGAN</span><br />
    <span class="txt-oswald">SLOGAN IPSUM LOREM</span>
    </p>
    </div>
    <div class="col-md-8 p-5 bg-cyan-lh">
    <h4>LOREM IPSUM 2</h4>
    <p class="text-secondary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    </div>
    </div>
    <div class="row mt-5">
    <div class="col-md-8">
    <img class="img-fluid" src="prova.jpg" alt="Prova" />
    </div>
    <div class="col-md-4 bg-rosino">
    <div class="mt-5 h-100">
    LOREM IPSUM 3
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </section>
    </body>
    </html>
    In pratica si vede così:
    ibb.co/iaHcQp

    Se le 2 righe sulla destra invece le metto della stessa lunghezza, riga 1 4+8 riga 2 4+8 invece si vede correttamente e distanziato , con le stesse proporzioni e comportamento tra le righe.

    Credo potrebbe essere una cattiva gestione delle row...
    Sapete darmi una mano?
    Grazie ciao!

  2. #2
    L'avatar di Giorgiotave
    Data Registrazione
    Oct 2004
    Località
    Monasterace
    Messaggi
    42,813
    Visita il canale Youtube di Giorgiotave
    Up, vediamo se qualcuno può aiutarti
    SMConnect 2019: l'evento per i professionisti del Digital Marketing arriva nella sua edizione più avanzata di sempre!

+ 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.