Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Poosizionare un div fuori dal boostrap grid container

  1. #1

    Poosizionare un div fuori dal boostrap grid container

    Ciao, probabilmente la domanda sarà banale ma cercando su internet non ho trovato nulla, ma vorrei sapere in che modo, all'interno della classe container di boostrap che posiziona tutti gli elementi all'interno di una griglia, è possibile posizionare un div ed il suo contenuto al di fuori di esso ma allineato a quanto lo precede (utilizzo la classe row). In questo esempio sotto ho provato ad utilizzare CSS con varie opzioni di "position" ottenendo scarsi risultati.

    codice:
    <!doctype html><html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    
        <style type="text/css">
            .outside{position: static; margin-left: 5%}
        </style>
    
    
      </head>
      <body>
        <div class="container text-center">
          <h1>DIV FUORI CONTEINER</h1>
        </div>
    
    
          <div class="row justify-content-center">
    
    
          <form class="login">
            <div class="form-group row">
              <label class="control-label col-md-3" for="v_piva">Partita Iva:</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="v_iva" placeholder="Partita Iva" name="v_iva"  minlength="11"  maxlength="11" required pattern="[0-9]{11}">
              </div>
            </div>
            <div class="form-group row">
              <label class="control-label col-md-3" for="v_nese">Nome Esercizio:</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="v_nese" name="v_nese" placeholder="Nome Esercizio" required>
              </div>
              <div class="outside">questo contenuto deve essere fuori dal container</div>
            </div>
            <div class="form-group row">
              <label class="control-label col-md-3" for="v_ema">Email:</label>
              <div class="col-md-9">
                <input type="email" class="form-control" id="v_ema" name="v_ema" placeholder="Email" required>
              </div>
            </div>
          </form>
          
          </div>
    
    
    
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </body>
    </html>

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    622
    Al di là di come realizzarlo, cosa vuoi ottenere?

  3. #3

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,116
    Ciao, static è il valore di default per position, quindi in quell'esempio non ottieni nulla. Piuttosto dovresti usare il valore absolute per quell'elemento, in modo che sia tolto fuori dal regolare flusso dei contenuti e possa essere poi posizionato con le relative proprietà di posizionamento: top, right, bottom e left.

    Considera inoltre che un elemento con position absolute resta comunque relativo al suo contenitore più prossimo che ha un valore diverso da static (o al body, se non ne viene trovato uno).
    Vedi indicazioni riportate nella documentazione:
    absolute: The element is positioned relative to its first positioned (not static) ancestor element
    fonte: https://www.w3schools.com/cssref/pr_class_position.asp

    Per tale motivo può essere necessario applicare position relative all'elemento contenitore (quindi al div form-grup che contiene l'elemento .outside). Questo valore, in questo caso, non avrà alcun effetto sul posizionamento del contenitore, se non quello di creare appunto una relazione riguardo il posizionamento dei propri elementi discendenti.

    Per praticità puoi usare la classe position-relative di bootstrap da applicare direttamente al markup per il div contenitore.
    Mentre per l'elemento .outside puoi impostare left:100% in modo che risulti adiacente al lato destro del contenitore, come da tua immagine allegata.

    Riepilogando:

    - nel markup HTML
    codice:
    <div class="form-group row position-relative">
    - nel CSS
    codice:
    .outside{
       position: absolute;
       left: 100%;
    }




    PS: l'argomento è più che altro pertinente a CSS, piuttosto che HTML 5. Esiste una sezione specifica per CSS, avresti dovuto postare in quella. Ti prego di prestare maggiore attenzione la prossima volta. Per il momento segnalo di spostare la discussione.

    Buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    622
    Quote Originariamente inviata da ROCCHEFILI Visualizza il messaggio
    Immagino che quello sia il layout desktop. Prima di impazzire con questa cosa, hai pensato a come si comporterà quel div su tablet e smartphone? Tieni sempre conto di questo aspetto.

  6. #6
    La tua soluzione non funziona del tutto, forse ho capito male quanto mi hai suggerito. Con questo metodo non posiziono al di fuori del conteiner la classe outside ma semplicemente rimpicciolisco gli input e posiziono il contenuto di outside di fianco ad esse ma sempre e comunque dentro al contenitore padre da cui io voglio scollegarmi. Qui il codice modificato seguendo quanto dettomi:
    codice:
    <!doctype html><html lang="en">  <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    
    
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    
    
    
        <style type="text/css">
            .outside{
       position: absolute;
       left: 100%;
    }
        </style>
    
    
    
    
      </head>
      <body>
        <div class="container text-center">
          <h1>DIV FUORI CONTEINER</h1>
        </div>
    
    
    
    
          <div class="row justify-content-center">
    
    
    
    
          <form class="login">
            <div class="form-group row">
              <label class="control-label col-md-3" for="v_piva">Partita Iva:</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="v_iva" placeholder="Partita Iva" name="v_iva"  minlength="11"  maxlength="11" required pattern="[0-9]{11}">
              </div>
            </div>
            <div class="form-group row position-relative">
              <label class="control-label col-md-3" for="v_nese">Nome Esercizio:</label>
              <div class="col-md-9">
                <input type="text" class="form-control" id="v_nese" name="v_nese" placeholder="Nome Esercizio" required>
              </div>
              <div class="outside">questo contenuto deve essere fuori dal container</div>
            </div>
            <div class="form-group row">
              <label class="control-label col-md-3" for="v_ema">Email:</label>
              <div class="col-md-9">
                <input type="email" class="form-control" id="v_ema" name="v_ema" placeholder="Email" required>
              </div>
            </div>
          </form>
          
          </div>
    
    
    
    
    
    
    
    
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </body>
    </html>

  7. #7
    Sisi ci ho già pensato, in quel caso la classe outside "sparirebbe" e il suo contenuto verrebbe posto al di sotto.

  8. #8
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    622
    Quote Originariamente inviata da ROCCHEFILI Visualizza il messaggio
    Sisi ci ho già pensato, in quel caso la classe outside "sparirebbe" e il suo contenuto verrebbe posto al di sotto.
    Sinceramente non capisco questa tua richiesta. Perché vorresti un oggetto posizionato lì?
    Tra l'altro, la maggior parte dei layout (header compresa) occupano l'intero spazio a disposizione, quindi non ci sarebbe un "fuori".

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.