Question

如何在引导程序面板中的同一行上获取按钮和引导徽章？我还需要文本＆＃39; Selected Rows＆＃39;以及要在面板上拉动的徽章。

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>

Answer 1

这是你需要的。有关详细信息，请参阅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>

希望它有所帮助：）

Answer 2

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

请检查并告知我是否能够帮助您。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

在同一行上对齐引导程序面板标题上的按钮和徽章

3 个答案: