制作一个包含按钮的引导表单，在另一个按钮旁边显示为内联

Question

我想在“查看页面”按钮旁移动“删除页面”按钮。在bootstrap中有一种简单的方法吗？

我不想在表单中包装h1和“View page”按钮，以保持html的可读性。

<h1>
  Edit page
  <a target="_blank" class="btn btn-default" href="/view">View page</a>
  <form role="form">
    <input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
  </form>
</h1>

Answer 1

将display: inline添加到您的表单：

form{
  display: inline;
}

https://jsfiddle.net/ypkLaexL/

Answer 2

另一种解决方案是调整HTML。向表单添加pull-right类将使其与<h1>标记的右边距对齐，并将超链接放在<form>内将导致按钮按照您的对齐方式对齐期望的结果。

添加奖金;你没有创建一个覆盖Bootstraps表单框架的类。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>
  Edit page
  
  <form role="form" class="pull-right">
    <a target="_blank" class="btn btn-default" href="/view">View page</a>
    <input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
  </form>
</h1>

＆＃13;

＆＃13;

＆＃13;