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

Question

我的Laravel项目视图中有以下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区块之外，位于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

Answer 2

编辑：

根据bootstrap docs，面板由三个可选部分组成：panel-heading，panel-body和panel-footer。由于您要向右拉的按钮位于标题中，因此您应将HTML放在panel-heading

中

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

注意：.pull-left或.pull-right的元素应放在<h3>之前

css解决方案（原始答案，不好）：

为什么不将css添加到按钮？

e.g。

<a id="clear-schedule" class="btn btn-xs btn-raised pull-right" style="margin-right:10px">
    <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

或

<a id="clear-schedule" class="btn btn-xs btn-raised pull-right" style="position:relative;left:-10px">
    <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

更好的方法是不使用内联css，而是在.css文件中添加css规则。就像style.css

一样

#clear-schedule
{
    margin-right:10px;
}

或

#clear-schedule
{
    position:relative;
    left:-10px;
}