私は次の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解決策です。何かもっとしたい場合は以下の回答をご覧くださいbootstraptic。
少しのCSSを使用して、2列のページレイアウトを行うのと同じくらい簡単に、モーダルボディを2つの部分に分割できます。
...
<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;
}
モーダル内でグリッドシステムを使用する必要はありません。スパンに合わせようとすると、おそらく結果が悪化します。
bootstrap 3.0を使用している場合は、ここに答えを追加してください。 bootstrap 3.0では、_row-fluid
_はrow
に置き換えられ、span
は_col-md
_に置き換えられます(完全に変更されたログ here )
エドゥアルド・グラジェダの答えは
_<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>
_
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>