php - Bootstrap 按钮输入组无法使用 标签正确显示

Question

所以我正在为大学做一个社交网络 Facebook 类型的概念验证元素，我正在尝试让 Bootstrap 多按钮输入组正确显示评论框。

我想要文本区域，右侧有评论和喜欢按钮，整个输入组填满面板的宽度，如下所示。

Trying to achieve this!

问题是当我添加我的 <form> 时标签，<div class="row"> 中整个组的格式变得疯狂并在左侧形成一个小盒子(下面的屏幕截图)。如果我取出 <form>标签格式正确，但我不确定如何管理 <form>标签/将它们放在哪里以实现此多按钮组。

How it displays currently

下面的代码是在表格没有被破坏时的一些撤消，只是让你知道这不是我最初实现它的方式，而是我现在屈服的方式。

如果有人知道如何实现这一目标，我将不胜感激!

while($row = mysqli_fetch_assoc($result)) {

        //Get relative timestamp for current post
        $timestamp = strtotime($row['StatusTimestamp']);
        $stampRelative = CheckTimestamp($timestamp);

        echo '<div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">'.$row['UserName'].'<small class="postTimestamp"> '.$stampRelative.'</small></h3>
                </div>
                <div class="panel-body">
                    '.$row['StatusContent'].'
                </div>
                <div class="panel-footer clearfix">';
        echo '      <div class="row">
                        <div class="col-lg-11">
                            <div class="input-group">
                                <form action="'.CommentOnStatus($row['StatusID']).'" method="post">
                                    <input type="text" class="form-control" name="comment" placeholder="Post a comment...">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="submit">Comment</button>
                                        <input type="hidden" name="statusId" value="'.$row['StatusID'].'">
                                    </span>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <form action="'.LikeStatus($row['StatusID']).'" method="post">
                                <button type="submit" id="like" name="'.$row['StatusID'].'" class="btn btn-primary pull-right">Like</button>
                            </form>
                        </div>
                    </div>
                </div>
              </div>';
    }

Answer 1

我检查了你的代码。这应该可以正常工作。如果这不起作用，请告诉我。元素的放置存在一些小问题。请在你的行中使用它:

  <div class="col-lg-11">
       <form  method="post">
           <div class="input-group">
                 <input type="text" class="form-control" name="comment" placeholder="Post a comment...">
                 <span class="input-group-btn">
                      <button class="btn btn-default" style="border-width: 1px 0 1px 0;border-radius: 0;" type="submit">Comment</button>
                      <button type="submit" id="like" name="'" class="btn btn-primary" style="border-radius: 0 5px 5px 0;">Like</button>
                  </span>
                  <input type="hidden" name="statusId" value="">
            </div>
        </form>
   </div>

这是我的输出