twitter-bootstrap 如何将 Twitter 引导模式分为 2 部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14961932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to divide a Twitter bootstrap modal into 2 parts
提问by Saurabh Kumar
I have the following html
我有以下 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>
采纳答案by Pigueiras
Edit:This is just a pure CSSsolution, look to the answers below if you want something more bootstraptic.
编辑：这只是一个纯 CSS解决方案，如果您想要更引导性的东西，请查看下面的答案。
You can use a bit of css to divide the modal body in two parts, as simple as if you do a page layout of two columns.
您可以使用一点css将模态主体分为两部分，就像您进行两列页面布局一样简单。
...
<div class="modal-body>
<div class="first-column">
<!-- Your first column here -->
</div>
<div class="second-column">
<!-- Your second column here -->
</div>
</div>
...
and the CSS
和 CSS
.first-column {
width: 40%;
float: left;
}
.second-column {
width: 40%;
float: right;
}
There is no need of using the grid system inside the modal, and probably the result will be worse probably if you try to fit it with spans.
不需要在模态内部使用网格系统，如果您尝试将其与跨度匹配，结果可能会更糟。
回答by interskh
Just add an answer here if you are using bootstrap 3.0. In bootstrap 3.0, row-fluidis replaced by rowand spanis replaced by col-md(full changed log here)
如果您使用的是引导程序 3.0，只需在此处添加答案。在 bootstrap 3.0 中，row-fluid被替换为row和span替换为col-md（完整更改日志在这里）
So Eduardo Grajeda's answer becomes
所以 Eduardo Grajeda 的答案变成了
<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>
回答by Eduardo Grajeda
Just wanted to add that I managed to do this using Bootstrap-provided CSS. The following code worked for me:
只是想补充一点，我设法使用 Bootstrap 提供的 CSS 做到了这一点。以下代码对我有用：
<div class="modal-body row-fluid">
<div class="span6">
<!-- Your first column here -->
</div>
<div class="span6">
<!-- Your second column here -->
</div>
</div>
