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>

我正在努力获得＆＃34;显示详细信息＆＃34;文本左对齐和＆＃34;详细信息发现＆＃34;文本在面板标题内右对齐。然而，在这个时候，＆＃34;详细信息发现＆＃34;文字堆叠在下面。垂直排列。就像pull-right被忽略一样。我做错了什么？

Answer 1

这可能看起来违反直觉但反而这样做了:(在“<详细信息发布后”

中放置“显示详细信息”div

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

如果你要浮动一个元素（这就是.pull-right类所做的那样），它必须在非浮动元素之前移动它们在一行中。

答案 1 :(得分：1)

为什么不使用<span>标记代替＆＃34;详细信息＆＃34; div和<div class="pull-right">？

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="panel panel-default">
  <div class="panel-heading chev">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#details" class="collapsed">
        <div>
          <span>Show Details</span>
          <span class="pull-right">
            Details Found: <span class="badge">5</span>
          </span>
        </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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么不使用<span>标记代替＆＃34;详细信息＆＃34; div和<div class="pull-right">？

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="panel panel-default">
  <div class="panel-heading chev">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#details" class="collapsed">
        <div>
          <span>Show Details</span>
          <span class="pull-right">
            Details Found: <span class="badge">5</span>
          </span>
        </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>

＆＃13;

＆＃13;

＆＃13;