Wie ein Twitter Bootstrap-modal in zwei Teile teilen

Question

Ich habe die folgende 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: Dies ist nur eine reine CSS-Lösung, schaut auf die Antworten unten, wenn Sie wollen etwas mehr bootstraptic.

---

Sie können ein bisschen CSS verwenden, um die modale Körper in zwei Teile zu teilen, so einfach, wie wenn Sie ein Seitenlayout aus zwei Spalten tun.

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

und die CSS

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

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

Es gibt keine Notwendigkeit, die Grid-System innerhalb des modalen der Verwendung, und wahrscheinlich das Ergebnis schlechter sein wird wahrscheinlich, wenn Sie versuchen, es mit Spannweiten zu passen.

Answer 2

Ich wollte nur hinzufügen, dass ich dies mithilfe von Bootstrap-CSS bereitgestellt habe. Der folgende Code funktionierte für mich:

<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

Fügen Sie hier einfach eine Antwort hinzu, wenn Sie Bootstrap 3.0 verwenden. In Bootstrap 3.0 wird row-fluid durch row ersetzt und span wird durch col-md (Voll geänderte Protokoll here)

So Eduardo Grajeda des ersetzt Antwort wird

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