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

我使用的是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>

用户1
测试注释




姓名：
评论：
用户2
测试注释




姓名：
评论：

这是一把小提琴，看看我所说的重叠是什么意思

---

我希望表单的宽度受到限制，这就是为什么我将

class=“form col-xs-4”

您的表单不在正确的分区中。您将其放在第一个面板的页脚之后和下一个面板之前

这就解决了这个问题：

<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>

用户1
姓名：
评论：




用户2
姓名：
评论：

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

在使用引导程序之前使用

class=“row”

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
测试注释




姓名：
评论：
用户2
测试注释




姓名：
评论：

请查看更新的代码。
https://jsfiddle.net/v5da7qeq/2/

---

希望这能奏效

如果您选择全宽度表单布局，您可以从表单中删除col-xs-4类

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

---

但我需要两张表格，每条评论一张。我有两条评论，一条是用户名1，另一条是用户名2。我希望每个评论都有一个回复表单感谢注意到相同的ID只需在面板主体中添加表单就是您的代码。我不是这个意思。对不起，我不清楚。这就是我的意思。使用@kapil的答案很高兴找到了解决方案；）啊，谢谢，但我不想要全宽的表单布局。