显示与引导程序一致的按钮

Question

所以我有2个按钮，但其中一个按钮是在一个窗体中并显示在一个新行上。我是否可以将一行中的两个按钮对齐，而无需在表单内移动回复按钮？

<button class="btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button> 
<form action="" method="post"> 
<input type="hidden" name="comment_id" value=""> 
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button> 
</form> 

Answer 1

您可以添加pull-left顶端按钮浮动那个按钮，在表单中内嵌的内容将包裹在它旁边。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="pull-left btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button> 
 
<form action="" method="post"> 
 
<input type="hidden" name="comment_id" value=""> 
 
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button> 
 
</form>

Answer 2

使用display:inline答复按钮，然后在表格display: inline-block;。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 

 
    <button class="btn btn-primary btn-xs" data-toggle="collapse" style="display: inline;"> 
 
    <span class="glyphicon glyphicon-message-forward"></span> Reply</button> 
 
    <form action="" method="post" style="display: inline-block;"> 
 
    <input type="hidden" name="comment_id" value=""> 
 
    <button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button> 
 
    </form>