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

时间:2016-04-28 01:31:05

标签: html css angularjs html5 twitter-bootstrap

我正在使用响应式网络管理员单页应用程序,我正在使用Bootstrap 3AngularJS 1.4.8,我创建了一个面板,我在该面板中放了一个表单,I用两个按钮将页脚放在表单内。

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

我是否需要将页脚放在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 -->

2 个答案:

答案 0 :(得分:2)

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

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

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

修正bootply

答案 1 :(得分:1)

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

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

这意味着按钮将位于表单之外,但您无法在多个div上携带表单内容。如果您想避免从表单中删除按钮,您可能需要将它们留在正文中,并且可能将它们设置为类似于面板页脚的样式。