如何将 Twitter 引导模式分为 2 部分 [英] How to divide a Twitter bootstrap modal into 2 parts

查看：19
本文介绍了如何将 Twitter 引导模式分为 2 部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 html

<div id="myModal" class="modal hidefade" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-body"><表格><tr><td><div class="span2 fileupload fileupload-new pull-left" data-provides="fileupload"><div class="fileupload-preview缩略图" style="width: 200px; height: 150px;"></div><div><span class="btn btn-file"><span class="fileupload-new">选择图片</span><跨度class="fileupload-exists">更改</span><输入类型=文件"/></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">删除</a>

</td><td><div class="progress"><div class="bar" style="width: 60%;"></div>

<button class="btn btn-mini" type="button">上传</button></td></tr></tbody>

<div class="modal-footer"><button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>

解决方案

这只是纯 CSS 解决方案，如果您想要什么，请查看下面的答案更多引导.

<小时>

你可以用一点css把模态体分成两部分，就像你做一个两列的页面布局一样简单.

<代码>...
<div class="第二列"><!-- 您在此处的第二列-->
...

和 CSS

.first-column {宽度:40%；向左飘浮;}.第二列{宽度:40%；浮动:对；}

没有必要在模态内部使用网格系统，如果你尝试用跨度来拟合它，结果可能会更糟.

I have the following 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>

解决方案

Edit: This is just a pure CSS solution, look to the answers below if you want something more bootstraptic.

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.

...
<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

.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.

这篇关于如何将 Twitter 引导模式分为 2 部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆