web-dev-qa-db-fra.com

Comment diviser un Twitter bootstrap modal en 2 parties

enter image description here

J'ai le 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>
twitter-bootstraptwitter-bootstrap-2
18
Saurabh Kumar

Edit: Ceci est juste une solution ne pure CSS, regardez les réponses ci-dessous si vous voulez quelque chose de plus bootstraptic .

Vous pouvez utiliser un peu de CSS pour diviser le corps modal en deux parties, aussi simple que si vous faites une mise en page de deux colonnes.

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

et le CSS

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

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

Il n'est pas nécessaire d'utiliser le système de grille à l'intérieur du modal, et le résultat sera probablement pire si vous essayez de l'adapter à des portées.

9
Pigueiras

Ajoutez simplement une réponse ici si vous utilisez bootstrap 3.0. In bootstrap 3.0, row-fluid est remplacé par row et span est remplacé par col-md (journal entièrement modifié ici )

La réponse d'Eduardo Grajeda devient

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

Je voulais juste ajouter que j'ai réussi à le faire en utilisant le CSS fourni par Bootstrap. Le code suivant a fonctionné pour moi:

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