Question

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

我想要文本区域，右侧有一个Comment and Like按钮，整个输入组填充面板的宽度，如下所示。

问题是当我添加<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

在表单中使用课程navbar-form。它现在应该工作正常。因此表单看起来像<form action="'.CommentOnStatus($row['StatusID']).'" method="post" class="navbar-form">

Answer 2

我检查了你的代码。这应该工作正常。如果这不起作用，请告诉我。这是放置元素的小问题。请在您的行中使用此项：

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

这是我的输出

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

2 个答案: