html - 在 Bootstrap 中使用 pull-right 的按钮触及右边缘

Question

我的 Laravel 元素 View 中有以下 HTML。

<div class="panel panel-default">
    <a id="clear-schedule" class="btn btn-xs btn-raised pull-right">
        <i class="fa fa-trash-o" aria-hidden="true"></i> </a>
    <div class="panel-heading">
        <h3 id="panel-title" class="panel-title">Classes
        </h3>
    </div>
    <div id="classes" class="panel-body panel-options">
    </div>
</div>

id clear-schedule 是一个触发 AJAX 调用以清除购物车的按钮，但这对于这个问题的上下文并不重要。

我的问题是:为什么我的按钮在接触面板的地方向右拉了这么多？

我使用 pull-right 的其他图标都很好。

这是没有 pull-right 的样子:

Answer 1

有人可能有更好的答案，我对 html 没有那么多经验，但作为快速修复，您可以将 a 标记放在 h3 中以获取它向右浮动后与您的 h3 标签对齐。

您的 a 标签位于 panel-heading block 之外，位于 panel div 内。

panel-heading、panel-body 等都有不同的 css 属性，使它们在面板 div 内具有不同的填充等。

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 id="panel-title" class="panel-title">Classes 
      <a id="clear-schedule" class="btn btn-xs btn-raised pull-right">
        <i class="fa fa-trash-o" aria-hidden="true"></i>
      </a>
    </h3>
  </div>
  <div id="classes" class="panel-body panel-options">
  </div>
</div>

或者，将其放在h3 标签之前。

<div class="panel panel-default">
  <div class="panel-heading">
    <a id="clear-schedule" class="btn btn-xs btn-raised pull-right">
      <i class="fa fa-trash-o" aria-hidden="true"></i>
    </a>
    <h3 id="panel-title" class="panel-title">Classes
    </h3>
  </div>
  <div id="classes" class="panel-body panel-options">
  </div>
</div>

这是一个 bootply