Posizionare un div fuori dal boostrap grid container

**ROCCHEFILI** · 14-11-2018, 13:33

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>

**Roby140569** · 14-11-2018, 16:25

Al di là di come realizzarlo, cosa vuoi ottenere?

**ROCCHEFILI** · 15-11-2018, 16:32

ouside - Copia.png

**KillerWorm** · 15-11-2018, 17:37

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.

**Roby140569** · 16-11-2018, 11:21

Originariamente inviata da ROCCHEFILI

ouside - Copia.png

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.

**ROCCHEFILI** · 16-11-2018, 11:50

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>

**ROCCHEFILI** · 16-11-2018, 11:52

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

**Roby140569** · 16-11-2018, 12:00

Originariamente inviata da ROCCHEFILI

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

Discussione: Posizionare un div fuori dal boostrap grid container

Strumenti discussione

Ricerca discussione

Visualizza

Posizionare un div fuori dal boostrap grid container

Tag per questa discussione

Permessi di invio