drvpv7995
drvpv7995
采纳率100%
2016-04-22 01:21

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

已采纳

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>';
    }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douzhi2760 douzhi2760 5年前

    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

    enter image description here

    点赞 评论 复制链接分享
  • doubao6936 doubao6936 5年前

    Use the classnavbar-form in your form. It should work fine now. So form will look like <form action="'.CommentOnStatus($row['StatusID']).'" method="post" class="navbar-form">

    点赞 评论 复制链接分享