come dividere un modale Twitter bootstrap in 2 parti

Question

Ho il seguente codice HTML

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload"> 
          <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div> 
          <div> <span class="btn btn-file"><span class="fileupload-new">Select image</span> 
           <span 
           class="fileupload-exists">Change</span> 
            <input type="file" /> 
            </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> 

          </div> 
         </div> 
        </td> 
        <td> 
         <div class="progress"> 
          <div class="bar" style="width: 60%;"></div> 
         </div> 
         <button class="btn btn-mini" type="button">Upload</button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 

</div> 

Answer 1

Edit: Questo è solo una soluzione pura CSS, guardare le risposte qui sotto se vuoi qualcosa di più bootstraptic.

---

È possibile utilizzare un po 'di CSS per dividere il corpo modale in due parti, il più semplice se si fa un layout di pagina di due colonne.

... 
<div class="modal-body> 
    <div class="first-column"> 
     <!-- Your first column here --> 
    </div> 
    <div class="second-column"> 
     <!-- Your second column here --> 
    </div> 
</div> 
... 

e il CSS

.first-column { 
    width: 40%; 
    float: left; 
} 

.second-column { 
    width: 40%; 
    float: right; 
} 

v'è alcuna necessità di utilizzare il sistema di rete all'interno del modal, e, probabilmente, il risultato sarà peggiore probabilmente se si tenta di adattarsi con campate.

Answer 2

Volevo solo aggiungere che sono riuscito a farlo utilizzando CSS fornito da Bootstrap. Il seguente codice ha funzionato per me:

<div class="modal-body row-fluid"> 
    <div class="span6"> 
    <!-- Your first column here --> 
    </div> 
    <div class="span6"> 
    <!-- Your second column here --> 
    </div> 
</div> 

Answer 3

Basta aggiungere una risposta qui se si sta utilizzando bootstrap 3.0. In bootstrap 3.0, row-fluid è sostituito dal row e span è sostituito dal col-md (full cambiato registro here)

Quindi la risposta di Eduardo Grajeda diventa

<div class="modal-body row"> 
    <div class="col-md-6"> 
    <!-- Your first column here --> 
    </div> 
    <div class="col-md-6"> 
    <!-- Your second column here --> 
    </div> 
</div>