Dialogo modale di avvio. Il sistema di griglia può essere utilizzato all'interno di un contesto modale?

Question

Ho una finestra di dialogo modale Bootstrap per cui voglio impaginare le varie etichette e input. Ho provato a utilizzare le classi riga/colonna ma non sembrano fare nulla. quali sono le mie opzioni?

Grazie,
Doug

Answer 1

ho ottenuto che funziona bene ... http://www.bootply.com/WAwE3QyUdb

Aggiungi un colle al contenitore all'interno del modal-corpo.

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h3>Modal header</h3> 
     </div> 

     <div class="modal-body"> 
      <div class="container col-md-12"> 
       <div class="row"> 
        <div class="col-md-3"> 
         1st col 3 
        </div> 

        <div class="col-md-3"> 
         2nd col 3 
        </div> 

        <div class="col-md-3"> 
         3rd col 3</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Basta aggiungere la classe fila al modale come per il codice qui sotto e poi si può dividere il vostro modale come si desidera:

<div class="modal-body row"> 
    <div class="col-md-8"> 
    <p>Column One content here ... </p> 
    </div> 
    <div class="col-md-4"> 
    <p>Column Two content here ... </p> 
    </div> 
</div> 

Answer 3

si può fare il modal Bootstrap reattivo reimpostando il contenitore larghezze:

.modal-body {padding: 5px} 

.modal-dialog { 
@media(min-width: $screen-sm-min){ 
    width: 600px; 
    .container { 
    width: 590px; 
    } 
} 

@media(min-width: $screen-md-min){ 
    width: 800px; 
    .container { 
    width: 790px; 
    } 
} 

@media(min-width: $screen-lg-min){ 
    width: 1000px; 
    .container { 
    width: 990px; 
    } 
} 
} 

Answer 4

la risposta di Tom Rudge mi ha ispirato. Non è necessario che il contenitore sia anch'esso una colonna a larghezza intera, che Matt Dell ha indicato non funzionerà con i linters.

Rendi il contenitore contenitore fluido!

bootply showing col-md-12 and container-fluid side by side

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <h3>Modal with container fluid</h3> 
     </div> 
     <div class="modal-body"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-3"> 
         <p> 
          1st col 3 
         </p> 
        </div> 
        <div class="col-md-3"> 
         <p> 
          2nd col 3 
         </p> 
        </div> 
        <div class="col-md-3"> 
         <p> 
          3rd col 3 
         </p> 
        </div> 
        <div class="col-md-3"> 
         <p> 
          4th col 3 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 

Answer 5

uno sguardo bootstrap example c'è bisogno di aggiungere container o container-fluid o col-* classi con modal-body o all'interno modal-body

<div class="modal-body"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <p>1st col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>2nd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>3rd col 3</p> 
    </div> 
    <div class="col-md-3"> 
     <p>4th col 3</p> 
    </div> 
    </div> 
</div> 

see here

Answer 6

Dalla documentazione

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="row"> 
      <div class="col-md-4">.col-md-4</div> 
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
      <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-9"> 
      Level 1: .col-sm-9 
      <div class="row"> 
       <div class="col-xs-8 col-sm-6"> 
       Level 2: .col-xs-8 .col-sm-6 
       </div> 
       <div class="col-xs-4 col-sm-6"> 
       Level 2: .col-xs-4 .col-sm-6 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

http://getbootstrap.com/javascript/#modals-grid-system