我有以下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>
解决方法
编辑:这只是一个纯粹的CSS解决方案,如果你想要更多的引导,请查看下面的答案。
您可以使用一点CSS将模态体分为两部分,就像执行两列的页面布局一样简单。
... <div class="modal-body> <div class="first-column"> <!-- Your first column here --> </div> <div class="second-column"> <!-- Your second column here --> </div> </div> ...
和CSS
.first-column { width: 40%; float: left; } .second-column { width: 40%; float: right; }
没有必要在模态中使用网格系统,如果您尝试使用跨度,结果可能会更糟。