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

【问题标题】：Align on same line the button and badge on the bootstrap panel header将引导面板标题上的按钮和徽章对齐在同一行
【发布时间】：2017-02-21 12:17:08
【问题描述】：

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

Plunker 代码如下 https://plnkr.co/edit/QNLe7n?p=preview**

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

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

我对 HTML 进行了一些更改。请检查。这是更新的 plunker link

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

如果我能帮到你，请检查并告诉我。

【讨论】：

【解决方案2】：

h3 {
  display: inline;
}
.panel {
  float:right;
}

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

【讨论】：

我想你想实现这个。

【解决方案3】：

这是您需要的。更多详情请参阅Bootstrap Grid System。 Updated Plnkr

angular.module("myApp", ["dx"]);
(function() {
    'use strict';


    angular
      .module('myApp')
      .controller('PendingRequestsController', PendingRequestsController);
      
    PendingRequestsController.$inject = ['$scope'];

    function PendingRequestsController($scope) {
 
      $scope.addButton = {
        text: "Add Button",
        icon: "plus",
        type: "success",
        onClick: function(e) {}
      };
      
      $scope.selectedRowCount = 14;

    }

}());

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="angular.js@*"  src="//code.angularjs.org/1.3.11/angular.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-sanitize.min.js"></script>
  <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
  <script type="text/javascript" src="//cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script>
   <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="//cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css">
  <link rel="stylesheet" type="text/css" href="//cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css">
  <link rel="stylesheet" href="style.css" />
  <script src="myapp.module.js"></script>
  <script src="pending.controller.js"></script>

</head>

<body ng-app="myApp">
  <div ng-controller="PendingRequestsController" >
    
    <div class="panel panel-primary">
        <div class="panel-heading row">
            <div class="col-xs-6">
                <span style="display: inline-block;vertical-align: middle;" dx-button="addButton"></span>
            </div>
            <div class=" col-xs-6 text-right">
                <h4 style="display: inline-block;vertical-align: middle;">
                      Selected Records:<span class ="badge badge-default">{{selectedRowCount}}</span>
                </h4>
            </div>
        </div>
    </div>
  </div>
</body>

</html>

希望对你有帮助:)

【讨论】：

感谢 Manish，这在很大程度上确实有效，但我看到的问题是它们不在面板中居中。如何将它们垂直对齐到面板的中间
面板中间？没有得到你。如果您希望它们在面板中间对齐。那么为什么 ypu 将它们保留在面板标题中。将它们保存在面板主体中。在面板标题内，它们垂直对齐到中心。如果您可以绘制您想要实现的布局图。我可以更好地帮助你。
感谢您的回复马尼什。中间为垂直居中..所以在面板标题中，我希望标题和按钮在中心垂直对齐。按钮必须拉到右边。希望这能说明我想要做什么。
我认为我没有得到确切的要求。如果我错了PanelHeader=> Two columns Left(With button pulled to right) Right(With text pulled to right) 并且标题内容要垂直居中对齐，请纠正我。面板正文会有一些内容。已附上图片，请告知您是否需要该图片？这也是引导面板遵循的结构