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

【问题标题】：Bootstrap-3 panel footer doesn't fill panelBootstrap-3 面板页脚不填充面板
【发布时间】：2016-04-28 09:53:42
【问题描述】：

我正在开发一个响应式 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 -->

【问题讨论】：

标签： css angularjs html twitter-bootstrap

【解决方案1】：

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

这个 div 应该在panel-body div 关闭之后开始。您需要重新构建表单以使提交按钮仍在内部，否则如果您不想这样做，则必须使用 javascript / jQuery 提交它。

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

固定bootply

【讨论】：

【解决方案2】：

您的面板页脚未正确对齐面板底部的原因是因为您将它放在面板主体内。您的面板标题、面板主体和面板页脚都应该是面板本身内部的独立组件。

只需尝试从面板主体内移除面板页脚。

这意味着按钮将在表单之外，但您不能将表单内容传递到多个 div 上。如果您想避免从表单中删除按钮，您可能必须将它们保留在正文中，并且可能将它们的样式设置为类似于面板页脚的外观。

【讨论】：