html - 并排 Bootstrap 表单/按钮

Question

我正在尝试并排显示两个表单/按钮。 我的 HTML (Bootstrap) 代码如下:

<form role="form" action="delete.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-danger">Delete Post</button>
            </form>

            <form role="form" action="edit.php" method="post">
                <div class="form-group">
                    <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" />
                </div>
                <button type="submit" class="btn btn-info">Edit Post</button>
            </form>

在用户端显示如下:

我试图在用户端将它们并排放置。谢谢

Answer 1

请将这两个表单包装在单独的 div 中，或者将它们放在 float left 之后的 block 容器中。

<div class="floatleft">
   <form role="form" action="delete.php" method="post">
      <div class="form-group">
     <input type="hidden" name="delete_id" value="" />
      </div>
      <button type="submit" class="btn btn-danger">Delete Post</button>
   </form>
</div>
<div class="floatleft">
   <form role="form" action="edit.php" method="post">
      <div class="form-group">
         <input type="hidden" name="edit" value="" />
      </div>
      <button type="submit" class="btn btn-info">Edit Post</button>
   </form>
</div>

或者使表单成为一个 block 容器来解决这个问题。

<form role="form" action="delete.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
         <input type="hidden" name="delete_id" value="" />
          </div>
          <button type="submit" class="btn btn-danger">Delete Post</button>
       </form>
       <form role="form" action="edit.php" method="post" class="displayblockFloatLeft">
          <div class="form-group">
             <input type="hidden" name="edit" value="" />
          </div>
          <button type="submit" class="btn btn-info">Edit Post</button>
       </form>

我会推荐第一个选项，因为代码已经很清楚了。