Javascript 将引导面板标题上的按钮和徽标对齐在同一行上

如何在引导面板中的同一行上获取按钮和引导徽章？我还需要文本“选定行”和徽章被拉在面板上的权利

Plunker代码如下所示 **

选定记录：
{{selectedRowCount}}

这是您需要的。有关更多详细信息，请参阅

angular.module（“myApp”，“dx”）；
（功能（）{
"严格使用",；
有棱角的
.module（'myApp'）
.controller（“PendingRequestsController”，PendingRequestsController）；
PendingRequestsController.$inject=['$scope']；
函数PendingRequestsController（$scope）{
$scope.addButton={
文本：“添加按钮”，
图标：“加”，
键入：“成功”，
onClick:function（e）{}
};
$scope.selectedRowCount=14；
}
}());

所选记录：{selectedRowCount}
这是您需要的。有关更多详细信息，请参阅


angular.module（“myApp”，“dx”）；
（功能（）{
"严格使用",；
有棱角的
.module（'myApp'）
.controller（“PendingRequestsController”，PendingRequestsController）；
PendingRequestsController.$inject=['$scope']；
函数PendingRequestsController（$scope）{
$scope.addButton={
文本：“添加按钮”，
图标：“加”，
键入：“成功”，
onClick:function（e）{}
};
$scope.selectedRowCount=14；
}
}());

所选记录：{selectedRowCount}
我在HTML中做了一些更改。请查收。这是更新的plunker


选定记录：
14

请检查并让我知道我是否能够帮助您。
我在HTML中做了一些更改。请查收。这是更新的plunker


选定记录：
14

请检查并让我知道我是否能帮助您。

h3{
显示：内联；
}
.小组{
浮动：对；
}

选定记录：
{{selectedRowCount}}

h3{
显示：内联；
}
.小组{
浮动：对；
}

选定记录：
{{selectedRowCount}}
我认为您想要实现这一点。我认为您想要实现这一点。感谢Manish，这在很大程度上是可行的，但我看到的问题是它们没有集中在面板中。如何将它们垂直对齐到面板的中部面板的中部？我不明白你的意思。如果您希望它们在面板的中间对齐。那么为什么ypu要把它们放在面板标题中呢。将它们保存在面板体中。在面板标题内，它们与中心垂直对齐。如果你能画出你想要实现的布局图。我可以帮你更好。谢谢你的回复。垂直居中的中间。。因此，在面板标题中，我希望标题和按钮在中心垂直对齐。但是按钮必须向右拉。希望这能清楚地说明我想做什么。我想我没有得到确切的要求。如果我错了，请纠正我
PanelHeader=>左两列（按钮向右拉）右两列（文本向右拉）
，标题内容垂直居中对齐。面板主体将包含一些内容。附上一张图片，请让我知道这是否是你所需要的？此外，这是引导面板遵循的结构感谢Manish，这在很大程度上是可行的，但我看到的问题是，它们不在面板的中心。如何将它们垂直对齐到面板的中部面板的中部？我不明白你的意思。如果您希望它们在面板的中间对齐。那么为什么ypu要把它们放在面板标题中呢。将它们保存在面板体中。在面板标题内，它们与中心垂直对齐。如果你能画出你想要实现的布局图。我可以帮你更好。谢谢你的回复。垂直居中的中间。。因此，在面板标题中，我希望标题和按钮在中心垂直对齐。但是按钮必须向右拉。希望这能清楚地说明我想做什么。我想我没有得到确切的要求。如果我错了，请纠正我
PanelHeader=>左两列（按钮向右拉）右两列（文本向右拉）
，标题内容垂直居中对齐。面板主体将包含一些内容。附上一张图片，请让我知道这是否是你所需要的？这也是引导面板遵循的结构
<div class="panel panel-primary">
    <div class="panel-heading">
        <div>
            <span style="display: inline-block;vertical-align: middle;" dx-button="addButton"></span>
            <span style="display: inline-block;vertical-align: middle;" class="pull-right">
                  <h3>Selected Records: </h3>
                    <span class ="badge badge-default">{{selectedRowCount}}</span>
            </span>
        </div>
    </div>
</div>

<div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-6">
                <span dx-button="addButton"></span>
              </div>
              <div class="col-md-6 col-sm-6 col-xs-6">
                <span class="pull-right">
                      <h3 class="pull-left" style="margin:0">Selected Records: </h3>
                      <span class="badge badge-default ng-binding" style="">14</span>
                </span>
              </div>
            </div>
        </div>
    </div>
  </div>