为什么引导形式和面板重叠？

Question

我正在使用bootstrap，我有一个div面板，然后是一个表单，我有两次相同的结构元素。表格和面板在重叠后潜水。这是我的HTML：

    <div class="comment">
        <div class="panel panel-default">
            <div class="panel-heading">
                user1
            </div>
            <div class="panel-body">
                test comment
            </div>
            <div class="panel-footer">
                <ul class="list-inline">

                    <li id="reply"><a href="#">reply</a></li>
                    <li id="expand"><a href="#"> expand</a></li>
                </ul>
            </div>
        </div>
        <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> 
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" /> 
            </div>
            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea class="form-control" id="comment"></textarea> 
            </div>
            <div class="form-group">
                <input type="submit" value="Submit Comment" />
            </div>
        </form>
    </div>
    <div class="comment">
        <div class="panel panel-default">
            <div class="panel-heading">
                user 2
            </div>
            <div class="panel-body">
                test comment
            </div>
            <div class="panel-footer">
                <ul class="list-inline">
                    <li id="reply"><a href="#">reply</a></li>
                    <li id="expand"><a href="#"> expand</a></li>
                </ul>
            </div>
        </div>
        <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> 
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" class="form-control" id="name" /> 
            </div>
            <div class="form-group">
                <label for="comment">Comment:</label>
                <textarea class="form-control" id="comment"></textarea> 
            </div>
            <div class="form-group">
                <input type="submit" value="Submit Comment" />
            </div>
        </form>
    </div>

和here是一个小提琴，可以通过重叠来了解我的意思

我希望表单的宽度有限，这就是我放class="form col-xs-4"

的原因

Answer 1

在使用bootstrap col-*-* class

之前使用<div id="comment"> <div class="panel panel-default"> <div class="panel-heading"> user1 </div> <div class="panel-body"> test comment </div> <div class="panel-footer"> <ul class="list-inline"> <li id="reply"><a href="#">reply</a></li> <li id="expand"><a href="#"> expand</a></li> </ul> </div> </div> <div class="row"> <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name" /> </div> <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" id="comment"></textarea> </div> <div class="form-group"> <input type="submit" value="Submit Comment" /> </div> </form> </div> </div> <div id="comment"> <div class="panel panel-default"> <div class="panel-heading"> user 2 </div> <div class="panel-body"> test comment </div> <div class="panel-footer"> <ul class="list-inline"> <li id="reply"><a href="#">reply</a></li> <li id="expand"><a href="#"> expand</a></li> </ul> </div> </div> <div class="row"> <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name" /> </div> <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" id="comment"></textarea> </div> <div class="form-group"> <input type="submit" value="Submit Comment" /> </div> </form> </div> </div>

您的代码

{{1}}

Answer 2

你的表格不在正确的div中。您将它放在第一个面板的页脚之后和下一个面板之前。

这解决了它：

<div id="main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    user1
                </div>
                <div class="panel-body">
                    <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> 
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" /> 
                </div>
                <div class="form-group">
                    <label for="comment">Comment:</label>
                    <textarea class="form-control" id="comment"></textarea> 
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit Comment" />
                </div>
            </form>
                </div>
                <div class="panel-footer">
                    <ul class="list-inline">

                        <li id="reply"><a href="#">reply</a></li>
                        <li id="expand"><a href="#"> expand</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="comment">
            <div class="panel panel-default">
                <div class="panel-heading">
                    user 2
                </div>
                <div class="panel-body">
                    <form class="form col-xs-4" id="commentForm" action="comment.php" method="post" style="display:"> 
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" /> 
                </div>
                <div class="form-group">
                    <label for="comment">Comment:</label>
                    <textarea class="form-control" id="comment"></textarea> 
                </div>
                <div class="form-group">
                    <input type="submit" value="Submit Comment" />
                </div>
            </form>
                </div>
                <div class="panel-footer">
                    <ul class="list-inline">
                        <li id="reply"><a href="#">reply</a></li>
                        <li id="expand"><a href="#"> expand</a></li>
                    </ul>
                </div>
            </div>
        </div>

还要小心，你有几个具有相同id的div，这是不可行的。

Answer 3

请参阅更新的代码。
https://jsfiddle.net/v5da7qeq/2/
希望这会奏效！

Answer 4

如果您选择全宽表单布局，只需从表单中删除 col-xs-4 类。

<form class="form" id="commentForm" action="comment.php" method="post" style="display:">

https://jsfiddle.net/Neviton/v5da7qeq/4/