twitter-bootstrap – 如何将Twitter自举模式分为两部分

发布时间：2020-12-18 00:16:25 所属栏目：安全来源：网络整理

导读：我有以下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

我有以下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;
}

没有必要在模态中使用网格系统，如果您尝试使用跨度，结果可能会更糟。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!