Bootstrap-3面板页脚不填充面板

Question

我正在开发一个响应式的web管理单页面应用程序，我使用Bootstrap 3和AngularJS 1.4.8，我创建了一个面板，并将一个表单放在该面板中，我将页脚放在带有两个按钮的表单中。

我的问题是面板页脚没有覆盖/填充面板长度。

我需要把页脚放在form里面，这样按钮才能发送信息吗?或者，如果我把页脚放在form之外，按钮就可以发送信息了？

我认为问题在于我创建了一个<div class="col-lg-12">来放置面板标题，而在这个div中我创建了另一个<div class="col-lg-6">来放置面板内容，这就是为什么面板页脚没有覆盖整个面板的原因。

我试着把页脚放在<div class="col-lg-6">的外面，它起作用了，但是如果这样做，按钮就会在form的外面。这有关系吗?在我看来，将按钮放在form之外是一种糟糕的做法。

这是我的html代码

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Create User</h1>
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Basic Form Elements
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6">
                        <form role="form">
                            <div class="form-group">
                                <label>Name:</label>
                                <input class="form-control" placeholder="user name">
                            </div>
                            <div class="form-group">
                                <label>Email:</label>
                                <input class="form-control" placeholder="email">
                            </div>
                            <div class="panel-footer clearfix">
                                <div class="pull-right">
                                    <button type="reset" class="btn btn-default">Reset</button>
                                    <button type="submit" class="btn btn-primary">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.col-lg-6 (nested) -->
                    <!-- /.col-lg-6 (nested) -->
                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

Answer 1

您需要将panel-footer div移到panel-body div之外。

此分区应在关闭panel-body分区后启动。您需要重新构造表单以使提交按钮仍然在表单中，或者如果您不想这样做，您将不得不使用javascript / jQuery来提交它。

您可以在面板的bootstrap components部分中查看不同面板组件的用法示例。

固定bootply

Answer 2

面板页脚没有在面板底部正确对齐的原因是因为它位于面板主体内部。面板标题、面板主体和面板页脚都应该是面板内部的独立组件。

只需尝试从panel-body内部移除panel-footer。

这意味着按钮将位于表单之外，但您不能将表单内容带到多个div上。如果您希望避免从窗体中删除按钮，则可能必须将它们保留在正文中，并可能使它们的样式类似于面板页脚的外观。