Bootstrap表单/按钮并排

问题描述：

我想要并排获取两个表单/按钮。我的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>

在用户端而言，如下显示-结束。谢谢

这SO线程可以帮助你http://stackoverflow.com/questions/11481606/making-two-html-buttons-go-side-by-side –

答

请将这两个表格都包装在单独的div中，或者让它们在浮动左边后阻塞容器。

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

或者形成一个块容器来解决这个问题。

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

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

答

下面是使用显示属性（table-cell）并向每个表单添加表单类的方法。

查看工作示例代码段。

.myForm { 
 
    display: table-cell; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="well"> 
 
    <form role="form" action="delete.php" method="post" class="myForm"> 
 
     <input type="hidden" name="delete_id" value="<?php echo $row['ID']; ?>" /> 
 
     <button type="submit" class="btn btn-danger">Delete Post</button> 
 
    </form> 
 
    <form role="form" action="edit.php" method="post" class="myForm"> 
 
     <input type="hidden" name="edit" value="<?php echo $row['ID']; ?>" /> 
 
     <button type="submit" class="btn btn-info">Edit Post</button> 
 
    </form> 
 
    </div> 
 
</div>

Bootstrap表单/按钮并排

相关推荐