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添加到顶部按钮以浮动该按钮，表单中的内嵌内容将在其旁边包裹。

＆＃13;

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

＆＃13;

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>

显示符合引导程序的按钮

2 个答案: