Bootstrap面板右侧删除按钮无法与标题对齐的求助

我来帮你搞定这个对齐问题！你遇到的核心问题是Bootstrap中<form>默认是块级元素，会独占一行，导致它和面板标题的文本无法在同一行显示。不用自定义CSS，借助Bootstrap自带的类就能轻松解决。

方案1：使用Bootstrap内置的.form-inline类（推荐） #

这个类会让表单元素变成行内块布局，完美适配面板标题的同行需求，同时搭配Bootstrap标准的.panel-title类让标题样式更规范：

<div class="panel-heading">
  <h3 class="panel-title">Update Article</h3>
  <form class="delete_form pull-right form-inline" 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>

方案2：手动设置表单为行内块 #

如果不想用.form-inline，直接给表单添加display: inline-block样式也能达到效果：

<div class="panel-heading">
  <span>Update Article</span>
  <form class="delete_form pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data" style="display: inline-block;">
    <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-heading">
  <h3 class="panel-title">Update Article</h3>
  <form class="delete_form pull-right form-inline" 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">
  <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>

这样修改后，删除按钮就能和面板标题完美保持同一行对齐了，完全不用额外写自定义CSS~

内容的提问来源于stack exchange，提问作者user934820