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

Question

So I'm working on a social networking Facebook type proof of concept project for college and I'm trying to get a Bootstrap, multi-button input group to display properly for a comment box.

I would like to have the text area, with a Comment and Like button on the right hand side, with the whole input group filling the width of the panel as seen below.

Trying to achieve this!

The problem is when I add in my <form> tags, the formatting of the entire group within <div class="row"> goes crazy and forms a little box on the left hand side (screenshot below). If I take out the <form> tags formats properly, but I'm just not sure how to manage the <form> tags/where to put them to achieve this multi-button group.

How it displays currently

The code below is a few undos later to when the forms weren't broken, just so you know this isn't how I originally went about achieving it, but what i've succumbed to for now.

If anyone knows how to achieve this I'd be so grateful!

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

I checked your code. This should work fine. Let me know if this does not work. THere are minor problems of placing the elements. Please Use this in your row :

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

This is my output