twitter-bootstrap - descargar - bootstrap 4

Cómo dividir un modo de arranque de Twitter en 2 partes

Question

Tengo el siguiente 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

Solo agregue una respuesta aquí si está usando bootstrap 3.0. En bootstrap 3.0, el row-fluid se reemplaza por row y el span se reemplaza por col-md (registro completo cambiado here )

Entonces la respuesta de Eduardo Grajeda se convierte en

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

Answer 2

Solo quería agregar que logré hacer esto usando el CSS provisto por Bootstrap. El siguiente código funcionó para mí:

<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

Edición: esto es solo una solución CSS pura , mira las respuestas a continuación si quieres algo más bootstraptic .

Puede usar un poco de css para dividir el cuerpo modal en dos partes, tan simple como si hiciera un diseño de página de dos columnas.

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

y el CSS

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

No hay necesidad de usar el sistema de cuadrícula dentro del modal, y probablemente el resultado sea peor si intentas ajustarlo a los intervalos.