Bootstrap 按钮输入组无法使用 <form> 标签正确显示

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>

这是我的输出

Answer 2

在您的表单中使用 classnavbar-form。它现在应该可以正常工作了。 所以表单看起来像<form action="'.CommentOnStatus($row['StatusID']).'" method="post" class="navbar-form">