Question

我试图做到这一点：

......看起来更像是这样：

我正在处理的页面：

http://www.frostjedi.com/terra/scripts/demo/bootstrap-content-extends-past-modal.html

我的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">




<div class="modal fade modal-aside horizontal right events-modal ui-draggable in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false" style="display: block; padding-right: 0px;">
    <div class="modal-dialog modal-dialog modal-md">
        <div class="modal-content">
            <form class="form-full-event" action="http://local.pap360.com/run.php/reports/admin/timeclock" method="post">
                <div class="modal-body">

                    <div class="col-md-12">
                            <fieldset>
                                <input type="hidden" id="logID" name="logID" value="&lt;?= $row-&gt;logID ?&gt;">
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <label>Type</label>
                                        <select id="logType" name="logType" class="form-control">
                                            <option value="">Select Type</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Lunch">Lunch</option>
                                            <option value="Break">Break</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Time In</label>
                                        <input type="text" id="timeIN" name="timeIN" value="" class="form-control dateTime">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>Time Out</label>
                                        <input type="text" id="timeOUT" name="timeOUT" value="" class="form-control dateTime">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="reset" id="reset" class="btn btn-sm btn-warning">Cancel</button>
                                        <button type="submit" id="addEntry" class="btn btn-sm btn-success" disabled="">Add Entry</button>
                                        <button type="submit" id="submitChanges" class="btn btn-sm btn-primary">Update</button>
                                        <!--
                                        <button type="submit" id="updateEntry" class="btn btn-sm btn-primary">Update</button>
                                        -->
                                        <span id="errorMsg" style="color:red">&nbsp;</span>
                                    </div>
                                </div>
                            </fieldset>
                        <!--
                            <button type="submit" id="submitChanges" class="btn btn-primary">Submit Changes</button>
                            -->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如果我$('.modal-content').css('height', '150px');我得到的东西看起来像第二张图片，但我只是假设没有硬编码高度，如果我想添加说明文字等，必须对其进行调整

如果我$('fieldset').parent().css('float', 'none');确实解决了问题，但每个表单元素都在其自己的行上。

如果我不关心具有响应式布局，并且我不关心使用Bootstrap方式，我可以将不同的表单元素放入表中。

有什么想法吗？

Answer 1

只需将此类添加到模态体

即可

class="modal-body clearfix"

替换此

class="modal-body"

enter image description here

希望它有效。

Answer 2

您可以简单地将clearfix类添加到父元素zich包含框阴影属性

Answer 3

您可以使用类似这样的面板

 <div class="content">
                            <div class="form-horizontal" action="#">
                                <div class="panel panel-flat">
                                    <div class="panel-body">

并将所有控件插入

Answer 4

您可以为col-md-12添加额外的课程，然后将fieldset应用于float: unset。这样你的元素就会保持内联，但你的模态高度会有一些东西要计算。

Answer 5

你的问题出现在modal-body的第一个div子元素中，它的类col-md-12具有样式float="left"。删除class="col-md-12"或添加style="float:none"（或具有类似效果的其他浮动样式）。

bootstrap模态内容扩展到模态

5 个答案: