css - Bootstrap - 对齐面板标题中的内容

Question

我有一个使用 Bootstrap 的应用程序。此应用的顶部有一个面板元素，如下所示:

<div class="panel panel-default">
  <div class="panel-heading chev">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#details" class="collapsed">
        <div>
          <div>Show Details</div>
          <div class="pull-right">
            Details Found: <span class="badge">5</span>
          </div>
        </div>
      </a>
    </h4>
  </div>
  <div id="details" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-3">
          <label class="control-label">Item</label>
          <select class="form-control">
            <option></option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

我试图让面板标题中的“显示详细信息”文本左对齐，“找到详细信息”文本右对齐。但是，此时“找到详细信息”的文字是堆叠在下方的。它们是垂直排列的。这就像 pull-right 被忽略了。我做错了什么？

Answer 1

这似乎违反直觉，但改为这样做:(将“显示详细信息”div 放在“找到详细信息”div 之后)

<div class="pull-right">
    Details Found: <span class="badge">5</span>
</div>
<div>Show Details</div>

如果您正在 float 一个元素(这就是 .pull-right 类所做的)，它必须位于非 float 元素之前，以便它们排成一行。