如何在 bootstrap 面板右侧添加按钮

Question

我正在尝试在 bootstrap 面板的右侧添加一个删除按钮。无论我做什么，它都不会与面板标题一致。请帮忙

<div class="panel-heading">
     Update Article
     <form class="delete_form pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
        <input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
    </form>
</div>

编辑 1：添加了面板代码的其余部分。

    <div class="panel-body">
        <form class="article_form" id="article_form" enctype="multipart/form-data">
            <div class="row">
                <div class="col-sm-6 form-group">
                    <label for="title" requiredField>Title*</label>
                    <input type="text" class="form-control" id="title" value="$title" name="title" maxlength="100" required>
                </div>
                <div class="col-sm-6 form-group">
                    <label for="pdf_link">PDF Link*</label>
                    <input type="text" class="form-control" id="pdf_link" value="$pdfurl" name="pdf_link" maxlength="100" required>
                </div>
            </div>
            <div class="row">
                <div class="word_file col-sm-6 form-group">
                    <label>Upload Microsoft Word file of the article.</label>
                    <input class="form-control" accept=".doc, .docx" type="file" id="word_file" name="word_file">
                </div>
                <div class="word_unavailable col-sm-6 form-group">
                    <label for="ur_name">Check if Microsoft Word file is unavailable.</label>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="chk_word" name="chk_word">
                        <label class="form-check-label" for="wordfiles">MS Word file is unavilable</label>
                    </div>
                </div>
            </div>
            <input type="submit" name="submit" class="btn btn-primary" value="Update" />
        </form>
        </div>
    </div>

我没有使用任何自定义 css。

编辑 2：需要的结果

Answer 1

<body>
<div class="panel panel-default">
    <div class="panel-heading container-fluid">Update Article
        <form class="pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
            <input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
        </form>
    </div>
    <div class="panel-body">Any content</div>
</div>
</body>

如何在 bootstrap 面板右侧添加按钮

How to add a button on the right o bootstrap panel

html

panel

twitter-bootstrap