Comment diviser une Twitter bootstrap modal en 2 parties
J'ai le code html suivant
<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>
Vous devez vous connecter pour publier un commentaire.
Edit: C'est juste un pur CSS solution, regardez pour les réponses ci-dessous si vous souhaitez quelque chose de plus bootstraptic.
Vous pouvez utiliser un peu de css pour diviser le modal corps en deux parties, aussi simple que si vous faites une mise en page en deux colonnes.
et le CSS
Il n'est pas nécessaire d'utiliser le système de grille à l'intérieur du modal, et probablement le résultat sera pire sans doute si vous essayez de vous adapter avec travées.
modal-lg
. Plus que probablement, vous aurez de vue alternatif des tailles en raison de mobile, tablette, etc ce qui est le but de la composantes de la grille. L'application d'un.row
classe à lamodal-body
comme @interskh suggérer, c'est actuellement la meilleure pratique. Cette réponse est correcte, mais est dû à la négligence de l'Amorce but.Juste ajouter une réponse ici, si vous êtes en utilisant bootstrap 3.0. Dans le bootstrap 3.0,
row-fluid
est remplacé parrow
etspan
est remplacé parcol-md
(plein changé journal ici)Donc Eduardo Grajeda la réponse devient
.row-fluid
comme autre choix de.row
comme @Eduardo Grajeda mentionner dans sa réponse.Voulais juste ajouter que j'ai réussi à le faire à l'aide de Bootstrap CSS fourni. Le code suivant a fonctionné pour moi:
row-fluid
àmodal-body
: parce que la ligne a une largeur de 100%, le contenu sera s'écouler du corps de récipient. Créer une nouvelle ligne de fluide div à l'intérieur de modal-body.