html - 在Bootstrap中使用向右拉的按钮触摸到右边缘

我的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的情况：

最佳答案

有人可能会提供更好的答案，但我对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

关于html - 在Bootstrap中使用向右拉的按钮触摸到右边缘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36903609/